12

考虑一个简单的 JS 事件

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

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

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

4

3 回答 3

16

只需遍历它们：

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

于 2012-06-18T00:26:58.013 回答
4

只需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 添加的臃肿，它会明显更快；）

于 2012-06-18T00:24:56.327 回答
2 
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';
    }});
于 2012-06-18T00:24:37.480 回答