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

Question

我有许多按钮，我想在选择另一个按钮时打开类active，并在具有active类的按钮被选中时切换按钮再次选择(即删除该类)。

此外，当我 console.log 时，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');
    }

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>