javascript 按钮 当选择某个值时，如何从所有按钮中删除一个类？

Question

我有几个按钮，其中一个按钮应该禁用所有其他按钮。我编写了一个代码，通过添加一个类来选择按钮，再次单击时会删除该类。它还将值推送到数组中。我想在我的代码中使用无首选项按钮来从所有按钮中删除某个类，除了无首选项按钮。

我已经做到了，因此当单击它时它会删除数组中的所有内容，但我只需从所有按钮中删除该类即可。

代码:

    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

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

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>