Javascript类列表未按预期工作

我只想再次调用元素上的类列表。代码的前半部分应该影响类为“btn”的所有元素。第二部分应该只影响具有“数据测试”属性的所有元素

为什么具有“data test”属性的元素没有从具有“.btn”类的元素中得到处理？他们应该将“selected”和“bar”类都切换到它们，但只将“bar”类切换到它们（提供了JSFiddle）

HTML

按钮
按钮
按钮
按钮

JS

//前半部分
var btn=document.querySelectorAll（'.btn'）；
对于（变量i=0；i

---

非常感谢您的帮助，谢谢

这是因为您正在覆盖处理程序。元素只能为

onclick

属性分配一个处理程序

相反，请使用

.addEventListener（）

绑定处理程序

var btn=document.querySelectorAll（'.btn'）；
对于（变量i=0；i

。已选定{
背景颜色：橙色；
}

按钮
按钮
按钮
按钮

这是因为您正在覆盖处理程序。元素只能为

onclick

属性分配一个处理程序

相反，请使用

.addEventListener（）

绑定处理程序

var btn=document.querySelectorAll（'.btn'）；
对于（变量i=0；i

。已选定{
背景颜色：橙色；
}

按钮
按钮
按钮
按钮

是否覆盖onclick函数？在jQuery中，您可以添加多个onclick处理程序，但我不确定在纯Javascript中是否可以添加这些处理程序。@keamort您关于重写的说法是正确的-我不知道这一点。但是，您必须了解jQuery是用Javascript编写的。所以它使用纯Javascript来完成它所做的一切。您不是在重写onclick函数吗？在jQuery中，您可以添加多个onclick处理程序，但我不确定在纯Javascript中是否可以添加这些处理程序。@keamort您关于重写的说法是正确的-我不知道这一点。但是，您必须了解jQuery是用Javascript编写的。所以，它使用纯Javascript来完成它所做的一切。这是一个很好的答案，而且自从您修改后，它变得更有意义，谢谢。你能告诉我在IE8中保持此功能的最佳方法是什么吗？只是包括一个垫片还是用一个条件语句来解决它？@JustinBreen：是的，对不起。起初我掩饰得太快了。是的，有一些垫片可以使整个IE8产品现代化，比如

.addEventListener（）

。你可以有条件地加载IE条件注释。没问题，这是一个完美的答案。我正在尝试构建一个迷你库，我可以将它包含在我的所有项目中——因此，也许我可以将垫片作为库的一部分（已经包含了无类垫片），也许几年后就可以将其删除。你认为这会比使用jQuery更有效吗？@JustinBreen：我个人喜欢不必加载大型库的想法。我也使用自己的微型图书馆。您当然可以包括shim，但如果您的所有客户机都下载了只用于IE8的代码，那就太不幸了。本机代码总是比jQuery快，但任何垫片都有自己的开销。这是不可避免的。不过，这并不重要。因为垫片可能会扩展主机

.prototype

，所以它应该直接处理元素，而不是分配包装器，所以速度应该非常快。感谢您的解释。也许我不需要包括IE8支持——我只是喜欢“防弹”最小代码的想法。我认为到现在为止，我仍然应该包括IE9用户的类列表垫片。如果IE8现在即将消亡，那么一定会有大量的IE9用户。这是一个很好的答案，而且在你修改后会更有意义，谢谢。你能告诉我在IE8中保持此功能的最佳方法是什么吗？只是包括一个垫片还是用一个条件语句来解决它？@JustinBreen：是的，对不起。起初我掩饰得太快了。是的，有一些垫片可以使整个IE8产品现代化，比如

.addEventListener（）

。你可以有条件地加载IE条件注释。没问题，这是一个完美的答案。我正在尝试构建一个迷你库，我可以将它包含在我的所有项目中——因此，也许我可以将垫片作为库的一部分（已经包含了无类垫片），也许几年后就可以将其删除。你认为这会比使用jQuery更有效吗？@JustinBreen：我个人喜欢不必加载大型库的想法。我也使用自己的微型图书馆。您当然可以包括shim，但如果您的所有客户机都下载了只用于IE8的代码，那就太不幸了。本机代码总是比jQuery快，但任何垫片都有自己的开销。这是不可避免的。不过，这并不重要。因为填隙片可能会将主机扩展到

<button class="btn">Button</button>
<button class="btn">Button</button>

<button class="btn" data-test="button">Button</button>
<button class="btn" data-test="button">Button</button>

// First half

var btn = document.querySelectorAll('.btn');

for (var i = 0; i < btn.length; i++) {
    btn[i].onclick = function() {
        this.classList.toggle('selected');
    }
}


// Second half

var items = document.querySelectorAll('[data-test]');

for (var f = 0; f < items.length; f++) {
    items[f].onclick = function() {
        this.classList.toggle('bar');
    }
}