如何获取getElementsByClassName中的当前元素

Question

考虑一个简单的JS事件

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

如何将此代码扩展为通常适用于所有元素class="test".我的意思是点击元素并替换其内容.实际上,我们需要从click事件中获取节点号(在括号内提供).

我试图更好地理解不显眼的代码中的javascript,而不是像jQuery这样的实用方法.

Answer 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并使其基本上按值传递.