Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Подскажите с выбором эллементов (https://javascript.ru/forum/misc/23722-podskazhite-s-vyborom-ehllementov.html)

czp 03.12.2011 13:06

Подскажите с выбором эллементов
 
сделал драг энд дроп на сайт(за основу брал этот мануал) есть места в которые при перетягивании обьекта происходит событие, задаю эти места так

drag.dropplaces(
a = {// настройки для первого место
  place : function(){ var a = document.getElementById('dr2'); return a }, // место куда можно бростиь обьект
  hover : function(dropplace) { dropplace.style.border = '10px solid #000'; }, // что будет с местом, когда курсом с взятым обьектом навести
  hoveroff : function(dropplace) { dropplace.style.border = 'none'; }, // что будет есле курсор с обьект увести с места
  drop : function() { alert('1'); }  // после того как бросить обьект в место что будет
},
b = {//настройки для второго места
  place : function(){ var a = document.getElementById('dr1'); return a },
  hover : function(dropplace) { dropplace.style.border = '10px solid #0ff'; },
  hoveroff : function(dropplace) { dropplace.style.border = 'none'; },
  drop : function() { alert('2'); }
});

таким образом можно создавать любое кол-во мест сбрасывание обьекта со своими настройками, но не могу реализовать такую вешь :
есть у меня
<div id="container">
<div class="test" id="1">...</div>
<div class="test" id="2">...</div>
<div class="test" id="3">...</div>
<div class="test" id="4">...</div>
<div class="test" id="5">...</div>
<div class="test" id="6">...</div>
...
</div>

ряд дивов(местов куда необходимо бросать обьект), их нужно как то по классу или тегу определять,
что то типа такого

drag.dropplaces(
a = {   // настройки для первого место
  place : function(){ var a = document.getElementById('container').getElementsByTagName('div'); return a }, // место куда можно бростиь обьект
  hover : function(dropplace) { dropplace.style.border = '10px solid #000'; }, // что будет с местом, когда курсом с взятым обьектом навести
  hoveroff : function(dropplace) { dropplace.style.border = 'none'; },// что будет есле курсор с обьект увести с места
  drop : function() { alert('1'); }// после того как бросить обьект в место что будет
},

});

но var a = document.getElementById('container').getElementsBy TagName('div'); это не правильно и не работает оно, видь должно выглядить как то так var a = document.getElementById('container').getElementsBy TagName('div')[0], но руками перечислить к примеру 50 тегов или классов, не вариант, на то и создавал ту структуру настроки сброса местов, что бы как человек был))
вот, вообшем подскажите как мне тут поступить??(что бы к обьектам с одниаковым классом или тегов применялись одни настройки)

---------
что бы было легче, перефразирую вопрос:
как сделать что бы все DOM элемы, с одинаковым классом(или тегом), выполняли одно и тоже действие?

пример: при нажатие на элемы с классом class="ARTON", всегда выдавали сообщение alert('вы нажали на элем с классом ARTON')
не прибегая к такой конструкции

var elem = document.getElementById('container').getElementsByTagName('div')
var i = 0;

while (elem[i]) {
elem[i].onclick = function () { alert('вы нажали на элем с классом ARTON') }
i++;
}

GuardCat 07.12.2011 09:53

Как вариант, возможно, запускать функцию при нажатии в любое место, с дальнейшей проверкой на чём именно кликнул посетитель.

function doIt (e) {
	e = e || window.event;
	element = e.target || e.srcElement
	if (element.className === "ARTON") {
		alert("Вы сделали это. Вы нажали на элемент с классом ARTON.");
	}
}
if (document.body.addEventListener) {
	document.body.addEventListener("click", doIt);
} else {
	document.body.attachEvent("onclick", doIt);
}


Часовой пояс GMT +3, время: 04:00.