javascript 如何删除除您单击的类之外的所有类？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26003283/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove all classes except the one you clicked?
提问by Jordy
This functions starts when I click on a link. It needs to remove all '.is-active' classes on the elements with the attribute [data-route]. And add the class '.is-active' on the [data-route] element that is connected with the link I clicked on.
当我点击一个链接时，这个功能就会启动。它需要删除具有 [data-route] 属性的元素上的所有“.is-active”类。并在与我单击的链接连接的 [data-route] 元素上添加类“.is-active”。
toggle: function(section){
var sections = document.querySelectorAll('[data-route]');
for (i = 0; i < sections.length; i++){
document.querySelector('[data-route]').classList.remove('is-active');
}
document.querySelector(section).classList.add('is-active');
}
But this doesn't work. It doesn't remove the classes?
但这不起作用。它不删除类？
See example: http://jordypouw.github.io/myFED2/deeltoets1/index.html
参见示例：http: //jordypouw.github.io/myFED2/deeltoets1/index.html
P.S. it has to be in vanilla JavaScript.
PS它必须在vanilla JavaScript中。
回答by Samsy
toggle: function(section){
var sections = document.querySelectorAll('[data-route]');
for (i = 0; i < sections.length; i++){
sections[i].classList.remove('is-active');
// querySelectorAll return an array of dom elements, u can access them directly.
}
// I suppose in your case that ' section ' variable is the clicked element so :
section.classList.add('is-active')
// if not you have to store the dom element from the event, and add the class here.
}
回答by Tony Porto
Set up a variable for the clicked item..
为点击的项目设置一个变量..
jQuery('.clicker-item').on("click", function(){
var clicked = jQuery('.clicker-item').not(jQuery(this));
clicked.removeClass("active")
jQuery(this).toggleClass("active")
});
回答by Shaifali Kalia
toggle: function(section){
document.querySelectorAll("[data-route]").forEach( e => {
e.classList.remove("is-active");
});
// querySelectorAll return an array of dom elements, u can access them directly.
// I suppose in your case that ' section ' variable is the clicked element so :
document.querySelectorAll("[data-route]").forEach( e => {
e.classList.add("is-active");
});
// if not you have to store the dom element from the event, and add the class here.
}
回答by vsync
you can do this:
你可以这样做：
for (var item of document.querySelectorAll('[data-route]')) {
item.classList.remove('is-active');
}
This is ecmascript6so it won't work on old browsers. I like it because it's clean and nice. to get it to work on other browsers you must convertthe nodes collection into a real array, so you could loop it.
这是ecmascript6，因此它不适用于旧浏览器。我喜欢它，因为它干净漂亮。为了让它在其他浏览器上工作，你必须将节点集合转换成一个真正的数组，这样你就可以循环它。
回答by DJ Burb
shouldn't it be this:
不应该是这样的：
toggle: function(section){
var sections = document.querySelectorAll('[data-route]');
for (i = 0; i < sections.length; i++){
document.querySelector('[data-route]').removeClass('is-active');
}
document.querySelector(section).addClass('is-active');
}
Edit: Sorry, I should have said removeClass and addClass
编辑：对不起，我应该说 removeClass 和 addClass
