javascript - 单击按钮 2 时如何从按钮 1 中删除类 - Vanilla JS

Question

我正在尝试在 Button 1 上制作高亮效果（带有 css 类的粗体和蓝色文本）。但是，当我单击菜单中的另一个按钮时，当然应该从按钮 1 中删除该类。

let buttons = document.querySelectorAll(".ef-button");

for (let i = 0; i < buttons.length; i++) {

   buttons[i].addEventListener("click", function () {

      if (buttons[i].classList.contains("active-element")) {
         buttons[i].classList.remove("active-element");
      } else {
         buttons[i].classList.add("active-element");
      }

   })

}

这就是我写的。我可以单击每个按钮以突出显示它，但是当我单击另一个按钮时，它不会从第一个按钮中删除类...无论如何，我可以单击已突出显示的按钮再次删除类。

我需要的是一个“重置”，它从我点击的按钮中删除类。

当我点击按钮时：

标签： javascriptloopsevent-handling

Answer 1

这种方式：
对于那些想要避免在 MDN Doc1 中搜索的人

document
.querySelectorAll('.ef-button')
.forEach( (btClickEv,_,buttons) =>
  {
  btClickEv.onclick = () =>
    buttons.forEach(bt=>bt.classList.toggle('active-element',bt===btClickEv))
  })

.ef-button       { background : pink; }
.active-element  { background : green; }

<button class="ef-button"> bt1 </button> 
<button class="ef-button"> bt2 </button> 
<button class="ef-button"> bt3 </button> 
<button class="ef-button"> bt4 </button> 
<button class="ef-button"> bt4 </button>