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

您正在尝试使用 .classList在 NodeList类型是什么document.querySelectorAll返回，您应该改为在 NodeList 中的每个元素上使用它。

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

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

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