JavaScript：在多个元素上添加/删除单个类

如何在多个类选定元素上添加/删除单个类

在我的设置中，我缓存了一些变量，但每个变量都没有内容：

var classOne    = document.querySelector(".class1");
var classTwo    = document.querySelector(".class2");
var classThree  = document.querySelector(".class3");
var classFour   = document.querySelector(".class4");

但我也在尝试这样做：

var allClasses = [classOne, classTwo, classThree, classFour];

allClasses.classList.add("active");
allClasses.classList.remove("active");

但似乎不起作用

请不要使用jQuery。

试试这个：

var classOne    = document.querySelector(".class1");
var classTwo    = document.querySelector(".class2");
var classThree  = document.querySelector(".class3");
var classFour   = document.querySelector(".class4");

var allClasses = [classOne, classTwo, classThree, classFour];

allClasses.forEach(function(el) {
  el.classList.add("active")
})

---

现在可以简化为：

document.queryselectoral（'.class1、.class2、.class3、.class4'）.forEach（el=>el.classList.add（'active'））

如果需要旧版浏览器支持，请使用常规功能或，并包括以下多边形填充：

if（window.NodeList&！NodeList.prototype.forEach）{
NodeList.prototype.forEach=函数（回调，thisArg）{
thisArg=thisArg | |窗口
for（设i=0；i

如果经常使用

querySelectorAll

，可以将其绑定到变量：

const$$=document.queryselectoral.bind（文档）
$$（'.class1、.class2、.class3、.class4'）.forEach（el=>el.classList.add（'active'））

这可能会帮助您注意一些事情：

类列表在IE8或IE9中不受支持。（也可以是。）此外，
querySelector
会在DOM中查找第一个匹配的元素。@user3143218:可能“el”表示数组中的元素，无论您将“element”理解为“array element”还是“DOM element”。：-）Array.prototype.forEach传入其所在索引的值。在这种情况下，将是元素@T.J.Crowder我本来打算使用DOM元素，但有一点很好：）