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

Answer 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添加的膨胀，它会明显加快;）

Answer 3

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

但是我最推荐使用addEventListener（或者IE中的某些版本的IE /某些版本的attachEvent）：

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

如何获取getElementsByClassName中的当前元素

3 个答案: