Question

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

如果你直接点击彼此之前/之前的元素（按钮），我只能使它工作。

如果我点击按钮1然后点击按钮4，那么它就会不断添加类。

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");

});

}

我知道为什么以上不起作用，我直接告诉它只解决next / prev，但是我尝试过使用if / else classList包含，！this.classList.contains，e.currentTarget in various组合，但我无法使它工作。

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

if（any myButtons.classList.contains（“selected”））
删除选中的
否则
添加选定的

我花了几个小时搜索一个vanilla JS解决方案，但我只能找到jQuery - 我想学习普通的JavaScript。

有人可以给我一些指示吗？非常感谢！

Answer 1

以下是处理此问题的另一种方法。首先，内部forEach循环负责删除＆＃34;选择＆＃34;从所有按钮中分类，然后将该类添加到单击的按钮中。

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

Answer 2

我修改了一下你的代码。您可以在此处找到更新https://jsfiddle.net/giuseppe_straziota/s6s0yb2k/

我已插入此cicle

for (var i = 0; i < myButtons.length; i++) {
                         var button2 = myButtons[i];
              button2.classList.remove("selected");
      }

Answer 3

你可以使用

document.querySelectorAll(".selected")

(function() {

  var myButtons = document.querySelectorAll('.my-button');

  for (var i = 0; i < myButtons.length; i++) {

    var button = myButtons[i];

    button.addEventListener('click', function(event) {
      var x = document.querySelectorAll(".selected");
      if(x.length) {
      	x[0].classList.remove('selected');
      }
      this.classList.toggle("selected");
      

    });
  }
})();

.selected {
  background: darkred;
}

<html>

<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>

<body>


  <div class="my-button">Button 1</div>

  <div class="my-button">Button 2</div>


  <div class="my-button">Button 3</div>
  <div class="my-button">Button 4</div>

  <div class="my-button">Button 5</div>
  <div class="my-button">Button 6</div>


</body>

</html>

一次只能突出显示一个元素

3 个答案: