Я пытаюсь динамически добавить функцию onclick в тегированные элементы "li". Но событие не срабатывает. Вот мой код:
var arrSideNavButtons = [];
var sideNavLi = document.getElementsByClassName('side-nav')[0].getElementsByTagName('li');
var arrayOfSceneAudios = [scene1Audio, scene2Audio,...];
for (var i = 0; i < sideNavLi.length; i++) {
sideNavLi[i].onclick = function() {
arrayOfSceneAudios[i].play();
}
arrSideNavButtons.push(sideNavLi[i]);
}
Можно ли закодировать его таким образом? Если да, в чем моя ошибка? Большое спасибо.
Оберните обработчик onclick
в закрытии, иначе он будет привязан только к последнему элементу в цикле:
for (var i = 0; i < sideNavLi.length; i++) {
(function(i) {
sideNavLi[i].onclick = function() {
arrayOfSceneAudios[i].play();
}
arrSideNavButtons.push(sideNavLi[i]);
})(i)
}
sideNavLi
действительно содержит набор элементов. Аналогично для arrayOfSceneAudios
.
Я считаю, что лучше использовать одну единственную функцию вместо того, чтобы создавать новую на каждой итерации:
var arrSideNavButtons = [],
sideNavLi = document.getElementsByClassName('side-nav')[0].getElementsByTagName('li'),
arrayOfSceneAudios = [scene1Audio, scene2Audio,...],
handler = function() {
this.sceneAudio.play();
};
for (var i = 0; i < sideNavLi.length; i++) {
sideNavLi[i].sceneAudio = arrayOfSceneAudios[i];
sideNavLi[i].onclick = handler;
arrSideNavButtons.push(sideNavLi[i]);
}
Element
, он только добавляет свойства к отдельным элементам. Это все еще немного смущает меня, и атрибуты html5 data-*
содержащие индекс, который i
мог бы использовать вместо этого, но я считаю, что это яснее и короче.