Как получить текущий элемент в getElementsByClassName

Рассмотрим простое JS-событие

document.getElementsByClassName('test')[0].onclick=function(){
document.getElementsByClassName('test')[0].innerHTML = 'New Text';
}

Как я могу расширить этот код, чтобы в целом работать для всех элементов с class="test". Я хочу, чтобы элемент щелкнул и заменил его содержимое. Фактически нам нужно получить номер node (предоставленный внутри скобки) из события click.

Я пытаюсь лучше понять javascript в ненавязчивых кодах, а не практический метод, например jQuery.

Ответы

Ответ 1

Просто перебирайте их:

var elements = document.getElementsByClassName('test');

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', (function(i) {
        return function() {
            this.innerHTML = 'New Text';
        };
    })(i), false);
}

Я использовал (function(i) { return function() { ... }; })(i) вместо просто function() { ... }, потому что если вы используете i в обратном вызове, значение i будет elements.length - 1 к моменту его вызова. Чтобы исправить это, вы должны затенять i и по существу передать его значение.

Ответ 2

Просто используйте this внутри функции. this будет элементом, на котором выполняется событие.

(function() {
    var elms = document.getElementsByClassName("test"),
        l = elms.length, i;
    for( i=0; i<l; i++) {
        (function(i) {
            elms[i].onclick = function() {
                this.innerHTML = "New Text";
            };
        })(i);
    }
})();

Это немного сложнее, чем jQuery:

$(".test").click(function() {
    $(this).html("New Text");
});

Но это будет значительно быстрее без раздувания, которое добавляет jQuery;)

Ответ 3

var all = document.getElementsByClassName('test');
for(var i=0;i<all.length;i++)
    all[i].onclick=function(){
        this.innerHTML = 'New Text';
    }

Но это наиболее рекомендуется использовать addEventListener (или attachEvent, в IE/некоторых версиях Opera, я думаю):

var all = document.getElementsByClassName('test');
for(var i=0;i<all.length;i++)
    all[i].addEventListener('click',function(){//If you're gonna use attachEvent, use 'onclick' instead of 'click'
        this.innerHTML = 'New Text';
    }});