如何使用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) => {&nbsp; const clickedElem = event.target;&nbsp; console.log(clickedElem);&nbsp; const allBtns = document.querySelectorAll('.btn.light');&nbsp; allBtns.forEach(btn => {&nbsp; &nbsp; if (clickedElem != btn) {&nbsp; &nbsp; &nbsp; btn.classList.remove('active');&nbsp; &nbsp; }&nbsp; });&nbsp; clickedElem.classList.toggle('active');}.active {&nbsp; 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) => {&nbsp; const clickedElem = event.target;&nbsp; if (clickedElem === previousClicked) {&nbsp; &nbsp; clickedElem.classList.remove('active');&nbsp; &nbsp; return;&nbsp; }&nbsp;&nbsp;&nbsp; if (previousClicked != null) {&nbsp; &nbsp; previousClicked.classList.remove('active');&nbsp; }&nbsp; clickedElem.classList.add('active');&nbsp; previousClicked = clickedElem;}.active {&nbsp; 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

从我在您的函数中看到的情况来看，您似乎还想active从页面中的任何其他按钮中删除该类。这是我的方法：let activeButton;const selectButton = e => {&nbsp; if (activeButton) {&nbsp; &nbsp; activeButton.classList.remove('active');&nbsp; }&nbsp; if (activeButton === e.currentTarget) {&nbsp; &nbsp; activeButton = null;&nbsp; &nbsp; return;&nbsp; }&nbsp; e.currentTarget.classList.add('active');&nbsp; activeButton = e.currentTarget;};这样它就不必遍历每个按钮来停用它们，因为它会跟踪活动按钮。

Answer 3

您可以尝试在“myDemo”函数中使用内置切换函数。不要使用 remove()，只需添加以下行：btn.classList.toggle("active");

Answer 4

我建议使用classList.toggle().const myDemo = (event) => {&nbsp; const clickedElem = event.target;&nbsp; const allBtns = document.querySelectorAll('.btn.light');&nbsp; // remove the class from all buttons&nbsp; allBtns.forEach(btn => btn.classList.remove('active'));&nbsp; // reapply the class for the button that was clicked&nbsp; clickedElem.classList.toggle('active');}.active {&nbsp; 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>