如何使用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;
};

这样它就不必遍历每个按钮来停用它们，因为它会跟踪活动按钮。