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

Posted 2023-03-05

【中文标题】JavaScript：在多个元素上添加/删除单个类

【英文标题】：JavaScript: Add/remove a single class on multiple elements

【发布时间】：2014-06-27 05:58:38

【问题描述】：

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

在我的设置中，我有一些缓存的变量并不适合每个变量：

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。

【问题讨论】：

也许对你有帮助***.com/questions/2155737/…

有几点需要注意：classList 在 IE8 或 IE9 中不受支持。 （不过也可以是shimmed。）另外，querySelector 在 DOM 中找到 first 匹配元素。

【参考方案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")
)

【讨论】：

@user3143218：大概“el”表示数组中的元素，无论您将“element”表示为“array element”还是“DOM element”。 :-)

Array.prototype.forEach 传入它所在的索引值。在这种情况下将是元素。 @T.J.Crowder 我想要 DOM 元素，但好点 :)

【参考方案2】：

现在可以简化为：

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

如果您需要旧版浏览器支持，请使用常规函数或 transpile 并包含此 polyfill：

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)
        
    

如果你经常使用querySelectorAll，你可以将它绑定到一个变量：

const $$ = document.querySelectorAll.bind(document)

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