Javascript 类添加/删除只工作一次答案

【问题标题】：Javascript class add/remove only working onceJavascript 类添加/删除只工作一次
【发布时间】：2022-11-23 20:00:28
【问题描述】：

我正在尝试编写一些 js，在单击时将一个额外的 .active 类添加到一个名为 .option 的现有类中。以及从带有两个类 .option.active 的任何 div 中删除所述 .active 类。

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

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 的新手，初学者课程才学了一半！

提前谢谢了

我已将控制台日志添加到函数中，以查看它们确实在运行

【问题讨论】：

标签： javascript function click jquery-selectors addeventlistener

【解决方案1】：

activeOption.classList.toggle("active");

这是一个双向执行的功能。如果已经有这个类，它会删除它。如果没有 - 它会添加

【讨论】：