JavaScript类名添加/移除仅生效一次问题求助

我想实现点击.option类元素时，给当前点击的元素添加.active类，同时移除所有其他.option元素的.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);

问题原因 #

你用querySelector获取的option和activeOption是页面加载瞬间的固定元素引用，当元素的类名变化后，这些变量不会自动更新。比如原本的.option:not(.active)元素被加上active后，它已经不符合选择器条件，但变量还是指向它；同理，原本的.option.active移除active后，变量也不会自动切换到新的激活元素，导致后续点击无法正确触发逻辑。

修改方案 #

不需要提前固定获取元素，而是在每次点击事件触发时，实时处理所有.option元素：先统一移除它们的active类，再给当前点击的元素添加active类。这样不管元素状态怎么变化，每次点击都会重新处理，实现反复切换的效果。

修改后的代码：

console.log(`It Works!`);

// 获取页面上所有带.option类的元素
const allOptions = document.querySelectorAll('.option');

// 给每个.option元素绑定点击事件
allOptions.forEach(option => {
  option.addEventListener('click', function() {
    // 第一步：移除所有.option元素的active类
    allOptions.forEach(opt => opt.classList.remove('active'));
    // 第二步：给当前被点击的元素添加active类
    this.classList.add('active');
    console.log('类名切换完成');
  });
});

代码解释（适合新手理解） #

• document.querySelectorAll('.option')：获取页面上所有带有.option类的元素，返回一个可遍历的元素集合。
• forEach：遍历元素集合，给每个.option都绑定点击事件。
• 点击事件内部，先遍历所有.option移除active类，确保不会有多个激活状态的元素；再用this指向当前被点击的元素，给它添加active类即可。

内容的提问来源于stack exchange，提问作者Jaizen