Установка функции onclick для элемента <li>

0

Я пытаюсь динамически добавить функцию 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]);
}

Можно ли закодировать его таким образом? Если да, в чем моя ошибка? Большое спасибо.

  • 0
    возможный дубликат закрытия Javascript внутри циклов - простой практический пример
  • 0
    Откуда вы знаете, что обработчик событий не сработал?
Показать ещё 2 комментария
Теги:

2 ответа

2
Лучший ответ

Оберните обработчик onclick в закрытии, иначе он будет привязан только к последнему элементу в цикле:

for (var i = 0; i < sideNavLi.length; i++) {
    (function(i) {
        sideNavLi[i].onclick = function() {
            arrayOfSceneAudios[i].play();
        }
        arrSideNavButtons.push(sideNavLi[i]);
    })(i)
}
  • 0
    Не работай на меня. Вы проверяли это раньше? Я имею в виду, это проблема со мной или все еще в цикле?
  • 0
    @ user2998173: узнайте, как отлаживать JavaScript . Установите точки останова, проверьте переменные. Мы можем работать только с тем, что вы нам сказали. Вы должны убедиться, что sideNavLi действительно содержит набор элементов. Аналогично для arrayOfSceneAudios .
Показать ещё 4 комментария
0

Я считаю, что лучше использовать одну единственную функцию вместо того, чтобы создавать новую на каждой итерации:

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]);
}
  • 0
    Просто к вашему сведению: perfectionkills.com/whats-wrong-with-extending-the-dom .
  • 0
    @FelixKling Интересная ссылка, но мой ответ не расширяет интерфейсы Element , он только добавляет свойства к отдельным элементам. Это все еще немного смущает меня, и атрибуты html5 data-* содержащие индекс, который i мог бы использовать вместо этого, но я считаю, что это яснее и короче.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню