JavaScript按鈕如何在選擇某個值時從所有按鈕中洗掉類？

我有幾個按鈕，一個按鈕應該禁用所有其他按鈕。我撰寫了一個代碼，通過添加一個類來選擇按鈕，當再次單擊時會洗掉該類。它還將值推送到陣列中。我想在我的代碼中創建無首選項按鈕以從所有按鈕中洗掉某個類，除了無首選項按鈕。

我已經做到了，所以當它被點擊時它會洗掉陣列中的所有內容，但我只需要從所有按鈕中洗掉類。

代碼：

    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>

uj5u.com熱心網友回復：

正如您從我的示例中看到的那樣，我將 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>

參考：

• Document.querySelectorAll()
• 禁用

uj5u.com熱心網友回復：

如果我理解正確，代碼可以簡化。請參閱下面的示例，其中根據您按下無偏好按鈕或其他按鈕的天氣執行不同的操作。為此，我向無偏好按鈕添加了一個類，以便我們可以輕松地查詢它。

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 css 数组 按钮 添加事件监听器

上一篇：如何更改javascript類中類建構式的內容并稍后訪問它？

下一篇：如何過濾顏色小于20的資料？