如何在 getElementsByClassName 中获取当前元素

考虑一个简单的 JS 事件

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

我如何扩展此代码以使其通常适用于所有元素class="test"。我的意思是单击该元素并替换其内容。事实上，我们需要从单击事件中获取节点号（括号内提供）。

我试图通过不显眼的代码更好地理解 Javascript，而不是像 jQuery 这样的实用方法。

只需迭代它们：

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);
}​

I used (function(i) { return function() { ... }; })(i)而不仅仅是function() { ... }因为如果你碰巧使用i在回调中，值i将elements.length - 1当你打电话的时候。要修复它，您必须阴影i并使其本质上按价值传递。