点击事件首次触发后失效？HTML/CSS/JS类切换问题求助

1. 逻辑冗余且错误：你嵌套了三层forEach，第一次点击时，先移除所有div的active类，紧接着又遍历所有div——因为刚移除完，所有div都没有active，所以又给所有div加上active，直接导致第一次点击后两个div都显示出来了。
2. 触发条件单一：你的事件只在点击的div有active类时才执行逻辑。第一次点击后所有div都有active，后续点击都会进入这个逻辑，但执行完还是所有div都有active，视觉上完全没变化，自然看起来“无法重复触发”。

保留你用querySelectorAll和forEach绑定事件的结构，只修改事件内部的逻辑：

需求1：点击任意div，所有div翻转active状态（有则删，无则加） #

把嵌套的三层forEach改成一层，直接遍历每个div切换active类：

const SignList = document.querySelectorAll('.sign')

SignList.forEach((div) => {
  div.addEventListener('click', () => {
    // 遍历所有div，逐个切换active类
    SignList.forEach(item => {
      if (item.classList.contains('active')) {
        item.classList.remove('active')
      } else {
        item.classList.add('active')
      }
      // 或者用更简便的toggle方法，效果完全一样：
      // item.classList.toggle('active')
    })
  })
})

需求2：点击哪个div，就只让这个div显示（其他隐藏） #

如果你的真实需求是切换显示单个div（比如初始显示红色，点击后显示蓝色，再点击红色又显示红色），逻辑改成先移除所有active，再给当前点击的div加active：

const SignList = document.querySelectorAll('.sign')

SignList.forEach((div) => {
  div.addEventListener('click', () => {
    // 先移除所有div的active
    SignList.forEach(item => item.classList.remove('active'))
    // 给当前点击的div加上active
    div.classList.add('active')
  })
})

• CSS里.sign用了position: absolute，两个div会重叠，点击的时候可能只能点到上层的，你可以给两个div设置不同的left值，比如.red {left: 100px;}，.blue {left: 250px;}，这样就能分开点击了。
• classList.toggle('active')是专门用来切换类的方法，比手动判断contains再增删更简洁，适合你这个场景。

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