Javascript 类列表未按预期工作

Question

我只想对一个元素再次调用 classList。代码的前半部分应该影响带有 class 'btn' 的所有元素。后半部分应该只影响具有 'data-test' 属性的所有元素。

为什么带有 'data-test' 属性的元素没有接受具有 '.btn' class 的处理？他们应该将 'selected' 和 'bar' classes 切换到它们，但只将 'bar' class 切换到它们（JSFiddle 提供）。

HTML

<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>

JS

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

https://jsfiddle.net/jstn/uxdb8836/

非常感谢您的帮助谢谢！

Answer 1

这是因为您正在覆盖处理程序。一个元素只能有一个分配给 onclick 属性.

的处理程序

而是使用 .addEventListener() 绑定处理程序。

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

for (var i = 0; i < btn.length; i++) {
  btn[i].addEventListener("click", function() {
    this.classList.toggle('selected');
  }, false);
}

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

for (var f = 0; f < items.length; f++) {
  items[f].addEventListener("click", function() {
    this.classList.toggle('bar');
  }, false);
}

.selected {
  background-color: orange;
  }

<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>

旁注，您可以重用这些函数以提高内存效率。

function btnHandler() {
    this.classList.toggle('selected');
}
function testHandler() {
    this.classList.toggle('bar');
}

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

for (var i = 0; i < btn.length; i++) {
    btn[i].addEventListener("click", btnHandler, false);
}

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

for (var f = 0; f < items.length; f++) {
    items[f].addEventListener("click", testHandler, false);
}

Javascript 类列表未按预期工作

Javascript classlist not working as expected

html

javascript

toggle