Правильно обратитесь к объекту элемента списка html в javascript для регистрации событий
Я хотел бы знать, как я могу ссылаться на объект элемента списка, если бы у меня был, например, следующий список html
<div id = "subdiv_2">
<div id = "subdiv_3">
<ul>
<li><a href = "">Item1</a></li>
<li><a href = "">Item2</a></li>
<li><a href = "">Item3</a></li>
</ul>
</div>
</div>
Как можно зарегистрировать onclick на Item2 li без необходимости иметь уникальный elementId например, я могу сделать это для subdiv_3, потому что у него уникальный идентификатор и его нет в списке
document.getElementById('subdiv_3').addEventListener('click', function();, false);
Моя цель - в конечном итоге назначить функцию каждому объекту списка для количества объектов списка с уникальными параметрами на основе номера объекта списка, например:
for(i=0;i<list.length;i++){
"document.getElementById(list.item"+i+").addEventListener(\'click\',function("+i+");,false);";
}
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы можете получить все дочерние элементы subdiv_3, которые являются <li>. Затем выполните итерацию по этому циклу, добавляя функции по ходу.
div = document.getElementById('subdiv_3');
els = div.getElementsByTagName('li');
for (var i=0, len=els.length; i<len; i++) {
alert(i); // add your functions here
}
Глядя на ваш образец кода, когда вы находитесь в цикле создания ваших функций, вы можете столкнуться с проблемами области закрытия. (Все функции будут использовать одно и то же значение i.) Ознакомьтесь с моим ответом на этот вопрос, чтобы решить эту проблему: Как добавить обработчик событий с аргументами в массив элементов в Javascript?
В ответ на комментарий Бенри к ответу Бенри, после использования его кода, следующее доказывает, что на каждый elementLi можно ссылаться с помощью els [i]
function attachToList(){
div = document.getElementById('menu2');
els = div.getElementsByTagName('li');
for (var i=0, len=els.length; i<len; i++) {
setTimeout('els['+i+'].style.backgroundColor=\"#FFFFCC\";',(250*i));
}
}
@Supernovah: Вы действительно можете назначить setTimeot() настоящую функцию. Это избавляет вас от форматирования строк, которое будет мешать вам, когда вы захотите сделать более сложные вещи, чем просто установить одно свойство.
Это код:
function attachToList() {
var div = document.getElementById('menu2');
var els = div.getElementsByTagName('li');
// create a closure returning an anonymous inner function
var fn = function(li) {
return function() {
li.style.backgroundColor = "#FFFFCC";
};
};
for (var i=0, len=els.length; i<len; i++) {
// create function instance suitable for current iteration
var changeLi = fn(els[i]);
// pass function reference to setTimeout()
setTimeout(changeLi, 250*i);
}
}
И краткое объяснение:
Использование закрытие - это трюк, который гарантирует, что при срабатывании setTimeout() все переменные по-прежнему имеют ожидаемые значения.
Вы делаете это, написав функцию, которая возвращает функцию. Внешняя функция принимает параметры, внутренняя - нет. Но это относится к параметрам внешней функции. В цикле вы вызываете внешнюю функцию (с правильными параметрами) и каждый раз получаете совершенно новую внутреннюю функцию, каждая из которых имеет свою собственную версию значений параметров. Это тот, который вы назначаете setTimeout().
Спасибо за это, я тоже понял это из другого поста Бенри.
Также я думаю, что использование return function () ... вызывает проблему закрытия с передачей переменной по цепочке. Без вложенности этой функции, а только в ее родительский элемент, ваша идея работает нормально.
Идеально! Спасибо :) Если бы Stackoverflow позволил мне проголосовать, я бы :)