如何使用javascript切換按鈕？

Question

我有一個按鈕，當我點擊它時它會變為活動狀態，但在另一次點擊時，我想刪除活動的 CSS

當我單擊按鈕時，它會通過向其添加活動類而變為活動狀態。 這是我嘗試過的，但我嘗試的是當我點擊相同的按鈕時，應該刪除活動的 CSS，基本上想要切換

 const myDemo = (event) => { const clickedElem = event.target const allBtns = document.querySelectorAll('.btn.light') allBtns.forEach(btn => btn.classList.remove('active')) clickedElem.classList.add('active') }

 .active { background: red; }

 <button onclick="myDemo(event)" class="btn light">DOG</button>

Answer 1

您可以使用clickedElem.classList.toggle來切換類。

在此之前，您需要刪除除當前選定按鈕之外的active類名稱，如下所示。

 const myDemo = (event) => { const clickedElem = event.target; console.log(clickedElem); const allBtns = document.querySelectorAll('.btn.light'); allBtns.forEach(btn => { if (clickedElem != btn) { btn.classList.remove('active'); } }); clickedElem.classList.toggle('active'); }

 .active { background: red; }

 <button onclick="myDemo(event)" class="btn light">DOG</button> <button onclick="myDemo(event)" class="btn light">DOG</button> <button onclick="myDemo(event)" class="btn light">DOG</button> <button onclick="myDemo(event)" class="btn light">DOG</button> <button onclick="myDemo(event)" class="btn light">DOG</button> <button onclick="myDemo(event)" class="btn light">DOG</button> <button onclick="myDemo(event)" class="btn light">DOG</button> <button onclick="myDemo(event)" class="btn light">DOG</button>

或者相反，您可以存儲上一個選擇的按鈕並使用它。

 let previousClicked = null; const myDemo = (event) => { const clickedElem = event.target; if (clickedElem === previousClicked) { clickedElem.classList.remove('active'); return; } if (previousClicked != null) { previousClicked.classList.remove('active'); } clickedElem.classList.add('active'); previousClicked = clickedElem; }

 .active { background: red; }

 <button onclick="myDemo(event)" class="btn light">DOG</button> <button onclick="myDemo(event)" class="btn light">DOG</button> <button onclick="myDemo(event)" class="btn light">DOG</button> <button onclick="myDemo(event)" class="btn light">DOG</button> <button onclick="myDemo(event)" class="btn light">DOG</button> <button onclick="myDemo(event)" class="btn light">DOG</button> <button onclick="myDemo(event)" class="btn light">DOG</button> <button onclick="myDemo(event)" class="btn light">DOG</button>

Answer 2

您可以嘗試在“myDemo”功能中使用內置切換功能。 不使用 remove()，只需添加以下行：

btn.classList.toggle("active");

Answer 3

我建議使用classList.toggle() 。

 const myDemo = (event) => { const clickedElem = event.target; const allBtns = document.querySelectorAll('.btn.light'); // remove the class from all buttons allBtns.forEach(btn => btn.classList.remove('active')); // reapply the class for the button that was clicked clickedElem.classList.toggle('active'); }

 .active { background: red; }

 <button onclick="myDemo(event)" class="btn light">DOG</button> <button onclick="myDemo(event)" class="btn light">DOG</button> <button onclick="myDemo(event)" class="btn light">DOG</button>

Answer 4

從我在您的函數中看到的內容來看，您似乎還想從頁面中的任何其他按鈕中刪除active類。 這是我的方法：

let activeButton;

const selectButton = e => {
  if (activeButton) {
    activeButton.classList.remove('active');
  }

  if (activeButton === e.currentTarget) {
    activeButton = null;
    return;
  }

  e.currentTarget.classList.add('active');
  activeButton = e.currentTarget;
};

這樣它就不必遍歷每個按鈕來停用它們，因為它會跟蹤活動按鈕。