点击同一文本两次无法移除新增class，使用toggle方法未生效如何解决

问题原因 #

你的代码逻辑存在执行顺序冲突：每次触发点击事件时，你都会先遍历所有文本元素，强制移除全部元素的red类，之后再对当前点击元素执行toggle操作。此时当前点击元素的red类已经被提前移除了，toggle只会执行添加逻辑，自然无法实现二次点击移除高亮的效果。

修复方案 #

只需要调整JS逻辑，先记录当前点击元素的激活状态，再做统一移除和状态设置即可，CSS、HTML代码无需改动：

const txts = document.querySelectorAll('.txt');
const txtColor =(txt)=> {
  txt.addEventListener('click', e => {
    if(e.target.classList.contains('txt')) {
      // 提前记录当前点击元素是否已经是高亮状态
      const isCurActive = e.target.classList.contains('red');
      // 移除所有元素的高亮
      txts.forEach(txt => txt.classList.remove('red'));
      // 只有之前未高亮的元素才添加高亮，之前已经高亮的移除后就保持普通状态
      if(!isCurActive) {
        e.target.classList.add('red');
      }
    }
  });
}
txtColor(document.querySelector('ul')); 

调整后即可同时满足两个需求：

• 点击不同元素时，仅当前点击元素高亮，其余元素恢复默认色
• 点击已经高亮的元素时，取消该元素的高亮

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