Question

我想要在选择另一个按钮时切换类active的按钮有很多按钮，并且当再次选择具有active类的按钮时切换按钮（即移除类）。

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

行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>

Answer 2

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

从要删除课程的列表中排除所选的一个。

function btnClick() {

    var target = this;

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

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

JavaScript：querySelectorAll＆amp; classList切换不按预期工作

2 个答案: