JavaScript:querySelectorAll&；类列表切换未按预期工作

我有许多按钮，当选择另一个按钮时，我想打开类

活动

，并且当再次选择带有

活动

类的按钮时（即移除类）也要切换按钮

另外，

console.log
it时，
this
正确返回所选元素

行
this.classList.toggle（'active'）
正在添加类，但没有删除它。知道为什么吗

    var controls = document.querySelectorAll('.controls > button');

    for (var i = 0; i < controls.length; i++) {
        controls[i].addEventListener('click', btnClick, false);
    }

    function btnClick() {
        [].forEach.call(controls, function(el) {
            // Remmove active class from all buttons
            el.classList.remove('active');
        });

        this.classList.toggle('active');
    }

var-controls=document.querySelectorAll（'.controls>button'）；
对于（变量i=0；i
编辑

根据您的评论，您希望能够关闭按钮。我更新了答案以使用此行为


var-controls=document.querySelectorAll（'.controls>button'）；
//你也可以在这里使用forEach
[].forEach.call（控件，el=>{
el.addEventListener（'click'，btnClick，false）
})
函数btnClick（）{
//使用数组函数进行此操作
[].forEach.call（控件，el=>{
//除单击的元素外，删除活动类
如果（el！==此）el.classList.remove（'active'）；
});
//在单击的按钮上切换活动
this.classList.toggle（'active'）；
}
按钮{
边框宽度：1px；
边界半径：1em；
大纲：0；
}
按钮。激活{
背景：道奇蓝；
颜色：白色；
}

A.
B
C
D
编辑

根据您的评论，您希望能够关闭按钮。我更新了答案以使用此行为


var-controls=document.querySelectorAll（'.controls>button'）；
//你也可以在这里使用forEach
[].forEach.call（控件，el=>{
el.addEventListener（'click'，btnClick，false）
})
函数btnClick（）{
//使用数组函数进行此操作
[].forEach.call（控件，el=>{
//除单击的元素外，删除活动类
如果（el！==此）el.classList.remove（'active'）；
});
//在单击的按钮上切换活动
this.classList.toggle（'active'）；
}
按钮{
边框宽度：1px；
边界半径：1em；
大纲：0；
}
按钮。激活{
背景：道奇蓝；
颜色：白色；
}

A.
B
C
D
首先从所有元素中删除类。然后在其中一个上切换。因为您刚刚从所有这些文件中删除了它，所以总是会将其添加回来

从要从中删除类的列表中排除选定的类

function btnClick() {

    var target = this;

    [].forEach.call(controls, function(el) {
        if (target !== el) {
            el.classList.remove('active');
        }
    });

    target.classList.toggle('active');
}

首先从所有元素中删除该类。然后在其中一个上切换。因为您刚刚从所有这些文件中删除了它，所以总是会将其添加回来

从要从中删除类的列表中排除选定的类

function btnClick() {

    var target = this;

    [].forEach.call(controls, function(el) {
        if (target !== el) {
            el.classList.remove('active');
        }
    });

    target.classList.toggle('active');
}

如果选择A，然后再次选择A，则不会取消选择。这是我的问题。那是因为你总是在
B中的最后一行重新切换“active”（活动），如果你选择了A，然后选择了B，那么A应该关闭吗！因为它们总是被移除，然后很明显它会再次关闭。不知道为什么我没有看到。。。更新代码的建议？如果选择了一个新按钮，活动类应该移动，但是如果选择了活动按钮，类应该切换。太棒了！非常感谢。如果您选择A，然后再次选择A，它不会被取消选择。这是我的问题。那是因为你总是在
B中的最后一行重新切换“active”（活动），如果你选择了A，然后选择了B，那么A应该关闭吗！因为它们总是被移除，然后很明显它会再次关闭。不知道为什么我没有看到。。。更新代码的建议？如果选择了一个新按钮，活动类应该移动，但是如果选择了活动按钮，类应该切换。太棒了！非常感谢。你说得对，多谢我！谢谢你的快速回答。你是对的，帮我一把！谢谢你的快速回答。你好像在改造单选按钮。我知道你在说什么。因此，更好的方法是使用单选按钮，但对其进行样式设置，使标签获得样式，并且单选按钮UI应该隐藏？在这种情况下，它们应该看起来像按钮。你似乎在改造单选按钮。我知道你在说什么。因此，更好的方法是使用单选按钮，但对其进行样式设置，使标签获得样式，并且单选按钮UI应该隐藏？在这种情况下，它们应该看起来像按钮。