Привязка одного события к нескольким элементам, хранящимся в массиве, собственный JS

#javascript #javascript-events

#javascript #dom-события

Вопрос:

Все предлагают какие-то рамки, но я хотел бы знать, как это можно сделать в собственном JavaScript. Я пробовал этот код и некоторые другие вещи, никакого эффекта. Кажется, я не знаю о какой-то базовой базовой концепции. Любая помощь будет оценена.

 window.onload = function() {
    var trCurrent
    var main = document.getElementById('main');
    var tr = main.getElementsByTagName('tr');
    function hl() {
            trCurrent.setAttribute('class', 'highlight');
    };
    for (var x = 0; x < tr.lenght; x  ) { 
        trCurrent = tr[x];
        trCurrent.addEventListener ('mousedown', hl, false);
    }
};
  

Ответ №1:

  • Вы должны изменить trCurrent на this at your function h1 , потому trCurrent что он указывает на последний определенный элемент TR ( trCurrent = tr[x] для высокого x значения).
  • Используйте .length вместо .lenght .

Окончательный код:

 window.onload = function() {
    var main = document.getElementById('main');
    var tr = main.getElementsByTagName('tr');
    function hl() {
        this.setAttribute('class', 'highlight');
    };
    for (var x = 0; x < tr.length; x  ) { 
        tr[x].addEventListener ('mousedown', hl, false);
    }
};
  

Если вы хотите использовать переменную, которая может быть изменена во время цикла, необходимо обернуть тело в (анонимную) функцию:

 window.onload = function() {
    var main = document.getElementById('main');
    var tr = main.getElementsByTagName('tr');
    for (var x = 0; x < tr.length; x  ) {

        (function(trCurrent){ //Anonymous wrapper, first argument: `trCurrent`
            function hl() {
                trCurrent.setAttribute('class', 'highlight');
            };
            trCurrent.addEventListener ('mousedown', hl, false);
        })(tr[x]); //Passing a reference to `tr[x]`
    }
};
  

Комментарии:

1. Большое спасибо, я не ожидал такого подробного ответа!