如何点击切换过滤器元素的active类？寻求无嵌套循环的简洁实现

方案1：事件委托（推荐，无循环绑定） #

不用给每个按钮单独绑定事件，直接给父容器加一次监听，借助事件冒泡处理所有按钮的点击：

document.querySelector('.filters').addEventListener('click', (e) => {
  if (e.target.tagName === 'BUTTON') {
    // 移除当前激活按钮的active类（可选链避免找不到元素报错）
    document.querySelector('.filters .active')?.classList.remove('active');
    // 给点击的按钮添加active类
    e.target.classList.add('active');
  }
});

• 只需要一次事件绑定，后续新增过滤器按钮也能自动生效
• 不用遍历所有元素，直接定位当前激活项，性能更优

方案2：简化原有绑定逻辑（去掉嵌套循环） #

如果不想改事件绑定方式，也可以去掉内部的forEach循环，直接找到当前激活的元素操作：

filters.forEach(elem => {
  elem.addEventListener('click', () => {
    const activeBtn = document.querySelector('.filters .active');
    if (activeBtn) activeBtn.classList.remove('active');
    elem.classList.add('active');
  });
});

相比原代码，这里避免了遍历所有过滤器元素，只对当前激活项和点击项操作，代码更简洁。

注意：原代码的小问题 #

你原来的代码里有个变量作用域的隐患：内部forEach用item作为循环变量，回调里写的item.classList.add('active')其实应该是elem（当前点击的按钮），不然会误操作内部循环的最后一个元素，建议修正。

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