JavaScript：querySelectorAll 和 classList 切换未按预期工作

Question

我有许多按钮，我想在选择另一个按钮时打开 class active，并在带有 active [= 的按钮时切换按钮23=] 再次被选中（即删除 class）。

此外，当我 console.log 时，this 正确返回了所选元素。

行 this.classList.toggle('active'); 添加了 class 但没有删除它。知道为什么吗？

    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');
    }

Answer 1

编辑

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

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

// you can use forEach here too
[].forEach.call(controls, el => {
  el.addEventListener('click', btnClick, false)
})

function btnClick() {
  // use Array function for lexical this
  [].forEach.call(controls, el => {
    // except for the element clicked, remove active class
    if (el !== this) el.classList.remove('active');
  });

  // toggle active on the clicked button
  this.classList.toggle('active');
}

button {
  border-width: 1px;
  border-radius: 1rem;
  outline: 0;
}

button.active {
  background: dodgerblue;
  color: white;
}

<div class="controls">
  <button class="active">A</button>
  <button>B</button>
  <button>C</button>
  <button>D</button>
</div>

Answer 2

您首先从所有元素中删除class。然后你将它切换到其中一个。由于您只是将它从所有这些中删除，所以它总是会添加回去。

从要从中删除 class 的列表中排除所选的。

function btnClick() {

    var target = this;

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

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

JavaScript：querySelectorAll 和 classList 切换未按预期工作

JavaScript: querySelectorAll & classList toggle not working as expected

javascript

jquery-selectors