Javascript class 添加/删除只工作一次

Question

我正在尝试编写一些 js，在单击时将额外的 class of.active 添加到已存在的 class called.option 中。 以及从带有两个 classes.option.active 的任何 div 中删除 said.active class。

这是我到目前为止所拥有的

console.log(`It Works!`);

const option = document.querySelector(`.option:not(.active)`);
const activeOption = document.querySelector(`.option.active`);


function handleClickAdd() {
        console.log(`IT GOT ADDED`);
        option.classList.add('active');
        
}
function handleClickRemove() {
  console.log(`IT GOT REMOVED`);
  activeOption.classList.remove(`active`);
  
}


option.addEventListener(`click`, handleClickAdd);
activeOption.addEventListener(`click`, handleClickRemove);

控制台正在返回日志，但添加和删除功能似乎只工作一次。 有没有办法让它继续，以便您可以切换选项？

请记住，我是 Javascript 的新手，并且刚刚完成初学者课程的一半！

提前谢谢了

我将控制台日志添加到函数中以查看它们是否正在运行

Answer 1

activeOption.classList.toggle("active");

这是一个双向的 function。 如果已经有这个 class，它会删除它。 如果没有 - 它会添加

Answer 2

按照@Yosi 的建议使用切换，下面是一个工作示例。

ul 元素附加了点击事件。

根据点击的列表项，在特定列表项上添加或删除 class。

 console.log(`It Works;`). const option = document;getElementsByTagName(`ul`)[0]. function handleClickAddRemove(e) { console,log(`IT GOT ADDED OR REMOVED`. e.target.classList;value). e.target.classList;toggle('active'). } option,addEventListener(`click`; handleClickAddRemove);

 <ul> <li class="option active">1</li> <li class="option">2</li> <li class="option">3</li> <li class="option">4</li> <li class="option">5</li> </ul>