javascript - 一次仅突出显示一个元素的简单功能

Question

我有一个选定的(用于突出显示)类，我一次只想在一个元素上添加，因此每次单击一个新元素时，它都会将选定的类添加到该元素中，并从之前单击的任何元素中删除选定的类元素——无论哪个。

如果您直接点击元素(按钮)彼此相邻/相邻，我只能让它工作。

如果我点击按钮 1，然后点击按钮 4，那么它只会继续添加类。

https://jsfiddle.net/vLkjovrv/1/

var myButtons = document.querySelectorAll('.my-button');

 for (var i = 0; i < myButtons.length; i++) {

  var button = myButtons[i];

  button.addEventListener('click', function(event) {

   this.classList.toggle("selected");
   this.previousElementSibling.classList.remove("selected");
   this.nextElementSibling.classList.remove("selected");

});

}

我知道为什么上面的方法不起作用，我直接告诉它只处理下一个/上一个，但是我已经尝试在各种情况下使用 if/else classList contains, !this.classList.contains, e.currentTarget组合，但我无法使其工作。

我想我正在寻找类似的东西:

if (any myButtons.classList.contains("selected"))
删除选定的
否则
添加选择

我花了几个小时寻找普通的 JS 解决方案，但我只能找到 jQuery — 我想学习纯 JavaScript。

有人可以在这里给我一些指示吗？将不胜感激!

Answer 1

这是处理此问题的另一种方法。首先，内部的 forEach 循环负责从所有按钮中删除“选定”类，然后将该类添加到单击的按钮。

Array.prototype.forEach.call(buttons, function(b) {
  b.addEventListener('click', function(e) {
    Array.prototype.forEach.call(buttons, function(b) {
      b.classList.remove('selected')
    })
    b.classList.toggle('selected')
  })
})