点击盒子切换颜色功能异常，请求排查代码问题

常见错误原因及修正方案 #

1. 未先移除所有盒子的on类就添加新类 #

这是最普遍的问题：点击新盒子时，仅给当前元素添加on类，没有清除其他已高亮盒子的类，导致多个盒子同时显示黄色。

错误JS代码示例：

const boxes = document.querySelectorAll('.box');
boxes.forEach(box => {
  box.addEventListener('click', function() {
    this.classList.add('on'); // 只添加类，未处理其他盒子
  });
});

修正代码：

const boxes = document.querySelectorAll('.box');
boxes.forEach(box => {
  box.addEventListener('click', function() {
    // 先移除所有盒子的on类
    boxes.forEach(item => item.classList.remove('on'));
    // 再给当前点击的盒子添加高亮类
    this.classList.add('on');
  });
});

2. 动态HTMLCollection遍历异常 #

如果使用getElementsByClassName('box')获取盒子，它返回的是动态集合——DOM变化会实时改变集合内容，循环时容易出现索引混乱，导致类移除不彻底。

错误JS代码示例：

const boxes = document.getElementsByClassName('box');
for (let i = 0; i < boxes.length; i++) {
  boxes[i].addEventListener('click', function() {
    for (let j = 0; j < boxes.length; j++) {
      boxes[j].classList.remove('on');
    }
    this.classList.add('on');
  });
}

修正方案：
把动态集合转为静态数组后再操作：

const boxes = Array.from(document.getElementsByClassName('box'));
boxes.forEach(box => {
  box.addEventListener('click', function() {
    boxes.forEach(item => item.classList.remove('on'));
    this.classList.add('on');
  });
});

3. 事件委托逻辑遗漏清除操作 #

如果用父元素事件委托实现，只给当前点击的盒子加类，没清除其他盒子的高亮状态。

错误JS代码示例：

const container = document.querySelector('.container');
container.addEventListener('click', function(e) {
  if (e.target.classList.contains('box')) {
    e.target.classList.add('on'); // 未移除其他盒子的高亮类
  }
});

修正代码：

const container = document.querySelector('.container');
const boxes = container.querySelectorAll('.box');
container.addEventListener('click', function(e) {
  if (e.target.classList.contains('box')) {
    boxes.forEach(item => item.classList.remove('on'));
    e.target.classList.add('on');
  }
});

优化方案（可选） #

可以记录当前高亮的盒子，点击时直接操作该元素，减少遍历次数：

let activeBox = null;
const boxes = document.querySelectorAll('.box');
boxes.forEach(box => {
  box.addEventListener('click', function() {
    if (activeBox) activeBox.classList.remove('on');
    this.classList.add('on');
    activeBox = this;
  });
});

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