Question

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

在我的设置中，我有一些变量被缓存，因为每个都没有：

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。

Answer 1

试试这个：

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")
})

Answer 2

现在可以简化为：

document.querySelectorAll('.class1, .class2, .class3, .class4').forEach(el => el.classList.add('active'))

如果您需要旧版浏览器支持，请将您的代码转换为ES5并包括以下代码片段：

if (window.NodeList && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = function (callback, thisArg) {
        thisArg = thisArg || window
        for (let i = 0; i < this.length; i++) {
            callback.call(thisArg, this[i], i, this)
        }
    }
}

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

2 个答案: