javascript - 进行切换以向具有特定类的所有元素添加/删除类

Question

我一直在尝试进行切换，因此当单击时，它会向每个具有“ChangeColors”类的元素添加一个类，但一直无法这样做。 它返回

TypeError: Cannot read property 'add' of undefined

CSS

.ChangeColors {
    background-color: #ff801b;
    color:black;
}

.bluecolor {
 background-color: blue;
 color:white;
 }

Javascript

function ChangeColors() {
    var single = document.querySelector('.ChangeColors');
    var all = document.querySelectorAll('.ChangeColors');
    if (single.classList.contains('bluecolor')) {
      all.classList.remove('bluecolor');
      console.log("remove");
    } else {
      all.classList.add('bluecolor');
      console.log("add");
    }
}

Answer 1

您尝试在 NodeList 类型上使用 .classList，这是 document.querySelectorAll 返回的内容，您应该使用该类型NodeList 内的每个元素。

您实际上可以使用classList.toggle这样可以避免像这样进行所有手动切换。

const all = document.querySelectorAll('.ChangeColors');

all.forEach(elem => {
  elem.classList.toggle("bluecolor")
});