[英]How to remove all classes except the one you clicked?
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].
它需要删除具有 [data-route] 属性的元素上的所有“.is-active”类。 And add the class '.is-active' on the [data-route] element that is connected with the link I clicked on.
并在与我单击的链接连接的 [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
PS it has to be in vanilla JavaScript. PS它必须在vanilla JavaScript中。
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.
}
you can do this:你可以这样做:
for (var item of document.querySelectorAll('[data-route]')) {
item.classList.remove('is-active');
}
This is ecmascript6 so it won't work on old browsers.这是ecmascript6,因此它不适用于旧浏览器。 I like it because it's clean and nice.
我喜欢它,因为它干净漂亮。 to get it to work on other browsers you must convert the nodes collection into a real array, so you could loop it.
为了让它在其他浏览器上工作,你必须将节点集合转换成一个真正的数组,这样你就可以循环它。
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")
});
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.
}
I felt, that other answers were not neat enough.我觉得,其他答案不够简洁。
toggle: (s) => {
// Find all other sections and remove the active class:
document.body.querySelectorAll('[data-route]').forEach(i => i.classList.remove('is-active'))
// Add active to the inputted section:
s.classList.add('is-active')
}
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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.