![](/img/trans.png)
[英]How do I add and remove classes to multiple child elements nested in an UL with a single click using Javascript?
[英]JavaScript: Add/remove a single class on multiple elements
如何在多個類選擇的元素上添加/刪除單個類。
在我的設置中,我緩存了一些變量,而不是每個變量:
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.querySelectorAll('.class1, .class2, .class3, .class4').forEach(el => el.classList.add('active'))
如果您需要舊版瀏覽器支持,請使用常規函數或轉譯並包含此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'))
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.