javascript 按钮选择特定值后如何从所有按钮中删除 class？

Question

我有几个按钮，其中一个按钮应该禁用所有其他按钮。我写了一段代码，通过添加 class 选择按钮，当再次点击时删除 class。它还将值推入数组。我想在我的代码中设置无首选项按钮，以从所有按钮中删除某个 class，无首选项按钮除外。

我已经做到了，所以它会在单击时删除数组中的所有内容，但我只需要从所有按钮中删除 class。

代码：

    let div = document.getElementById('buttonDiv');

    let arr = [];

    div.addEventListener("click", function (event) {
        let tgt = event.target;

        function SelectedClass() {
            if (tgt.classList.contains('Selected')) {
                tgt.classList.remove('Selected');
            } else {
                tgt.classList.add('Selected');
            }
        }

        if (tgt.classList.contains('buttons')) {
            if (arr.indexOf(tgt.value) === -1) {
                if (tgt.value === 'Ignore') {
                    if (tgt.classList.contains('Selected')) {
                        tgt.classList.remove('Selected');
                    } else {
                        tgt.classList.add('Selected');
                        arr = [];
                    }
                } else {
                    SelectedClass();
                    arr.push(tgt.value);
                }
            } else {
                arr.splice(arr.indexOf(tgt.value), 1);
                SelectedClass();
            }
        }
        console.log(arr);
    })

    .buttondiv {
        position: relative;
        width: 200px;
        height: 675px;
        margin-left: 50%;
        transform: translateX(-50%);
        margin-top: 50px;
    }

    .buttons {
        width: 275px;
        height: 50px;
        display: inline-block;
        margin-bottom: 15px;
        ;
        border: 2px solid black;
        border-radius: 3px;
        background-color: white;
        color: black;
    }

    .Selected {
        background-color: orangered;
        color: white;
        border: none;
    }

<div class="buttondiv" id="buttonDiv">
    <button value="btn1" class="buttons">1</button>
    <button value="btn2" class="buttons">2</button>
    <button value="btn3" class="buttons">3</button>
    <button value="btn4" class="buttons">4</button>
    <button value="Ignore" class="buttons">No Preference</button>
</div>

我尝试使用 for 循环和查询选择器来完成它，但这没有用。有人知道解决方案吗？

Answer 1

正如您从我的示例中看到的那样，我将 querySelectorAll 添加到除忽略按钮之外的所有按钮，当用户单击“无首选项”时 forEach 将禁用或启用所有按钮。

let div = document.getElementById('buttonDiv');

let arr = [];

div.addEventListener("click", function(event) {
  let tgt = event.target;

  function SelectedClass() {
    if (tgt.classList.contains('Selected')) {
      tgt.classList.remove('Selected');
    } else {
      tgt.classList.add('Selected');
    }
  }

  if (tgt.classList.contains('buttons')) {
    if (arr.indexOf(tgt.value) === -1) {
      if (tgt.value === 'Ignore') {
        if (tgt.classList.contains('Selected')) {
          tgt.classList.remove('Selected');
          document.querySelectorAll('button:not(.ignore)').forEach(el => {
            el.disabled = false;
          });
        } else {
          tgt.classList.add('Selected');
          document.querySelectorAll('button:not(.ignore)').forEach(el => {
            if (el.classList.contains('Selected')) {
              el.classList.remove('Selected');
            }
            el.disabled = true;
          });
          arr = [];
        }
      } else {
        SelectedClass();
        arr.push(tgt.value);
      }
    } else {
      arr.splice(arr.indexOf(tgt.value), 1);
      SelectedClass();
    }
  }
  console.log(arr);
})

.buttondiv {
  position: relative;
  width: 200px;
  height: 675px;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 50px;
}

.buttons {
  width: 275px;
  height: 50px;
  display: inline-block;
  margin-bottom: 15px;
  ;
  border: 2px solid black;
  border-radius: 3px;
  background-color: white;
  color: black;
}

.Selected {
  background-color: orangered;
  color: white;
  border: none;
}

<div class="buttondiv" id="buttonDiv">
  <button value="btn1" class="buttons">1</button>
  <button value="btn2" class="buttons">2</button>
  <button value="btn3" class="buttons">3</button>
  <button value="btn4" class="buttons">4</button>
  <button value="Ignore" class="buttons ignore">No Preference</button>
</div>

参考：

Answer 2

如果我理解正确的话，代码可以简化。请参阅下面的示例，其中根据您按下无首选项按钮或其他按钮的天气发生不同的操作。为此，我在无首选项按钮上添加了一个 class，以便我们可以轻松查询。

let div = document.getElementById('buttonDiv');

    let arr = [];

    div.addEventListener("click", function (event) {
        let tgt = event.target;

        if (tgt.classList.contains('buttons')) {
          //when no preference is clicked remove all selected classes and empty the array
          if(tgt.value === 'Ignore') {
            event.currentTarget.querySelectorAll('.buttons').forEach((el) => {
              el.classList.remove('Selected');
              arr = [];
            });
          }
          //when other button is clicked removed the selected class from the no preference button and push the current value to the array
          else {
            event.currentTarget.querySelector('.buttons.ignore').classList.remove('Selected');
            arr.push(tgt.value);
          }
          //always add selected class to the current button.
          tgt.classList.add('Selected');
        }
        console.log(JSON.stringify(arr));
    })

.buttondiv {
        position: relative;
        width: 200px;
        height: 675px;
        margin-left: 50%;
        transform: translateX(-50%);
        margin-top: 50px;
    }

    .buttons {
        width: 275px;
        height: 50px;
        display: inline-block;
        margin-bottom: 15px;
        ;
        border: 2px solid black;
        border-radius: 3px;
        background-color: white;
        color: black;
    }

    .Selected {
        background-color: orangered;
        color: white;
        border: none;
    }

<div class="buttondiv" id="buttonDiv">
    <button value="btn1" class="buttons">1</button>
    <button value="btn2" class="buttons">2</button>
    <button value="btn3" class="buttons">3</button>
    <button value="btn4" class="buttons">4</button>
    <button value="Ignore" class="buttons ignore">No Preference</button>
</div>

javascript 按钮选择特定值后如何从所有按钮中删除 class？

javascript buttons how do i delete a class from all buttons when a certain value is selected?

javascript

css

arrays

button

addeventlistener