切换元素class后样式未生效 | 学生时间表开发故障排查

嘿，我仔细看了你的代码，问题的核心在于循环创建事件监听器时的闭包陷阱——你双击输入框时，看似修改了当前元素的class，但实际上操作的是循环最后一次创建的那个输入框！这就是为什么alert显示class变了，但你双击的那个框背景色还是绿色的原因。

为什么会这样？ #

你用var声明了cell变量，var的作用域是整个函数，而不是每次循环的块级作用域。当循环跑完后，所有事件监听器里的cell都会指向最后一次循环创建的那个input。所以不管你双击哪个输入框，实际修改的都是最后一个input的class，自然看不到当前点击的框变色啦。

两种快速修复方法 #

方法1：用this指向当前点击的元素 #

在事件监听器里，this就代表当前被双击的DOM元素，直接用它操作class就行，简单又靠谱：

cell.addEventListener("dblclick", function(){
  this.classList.toggle('selected'); // toggle可以一键切换选中/取消选中，比add更灵活
  console.log(this.classList); // 用console.log调试比alert舒服多了，不会卡页面
});

方法2：把var换成let（ES6+） #

let是块级作用域的变量，每次循环都会生成一个独立的cell，每个事件监听器都会绑定当前循环的那个元素：

function createTable(){
  var table = document.getElementById('table');
  for(let j = 0;j<names.length;j++) { // j也改成let，避免同样的作用域问题
    var row = document.createElement("tr");
    row.classList.add('row');
    for(let i=0;i<8;i++){ // i也换成let
      let cell; // 提前声明块级变量
      if(i==0){
        cell = document.createElement("input");
        cell.classList.add('name');
        cell.value= names[j];
        cell.addEventListener("dblclick", function(){
          cell.classList.toggle('selected');
          console.log(cell.classList);
        });
      }else if(i==4){
        cell = document.createElement("td");
        cell.classList.add('spacer');
      }else{
        cell = document.createElement("td");
        cell.classList.add('cell');
        cell.textContent = '';
      }
      row.appendChild(cell);
    }
    table.children[0].appendChild(row);
  }
}
createTable();

关于CSS的小补充 #

你的CSS写法其实没问题，input.name和input.selected优先级相同，只要input.selected写在input.name后面，就能覆盖绿色背景。如果想更稳妥，可以用组合选择器提高优先级：

input.name {
  width: 20em;
  background-color: #00ff00;
}

/* 组合选择器，优先级比单一类选择器高 */
input.name.selected {
  background-color: #ff7f7f;
}

额外小建议 #

• 别用alert调试啦，用console.log，不会打断你的操作流程；
• 用classList.toggle()代替add()，这样双击可以切换选中状态，交互更友好；
• 循环里的i和j都尽量用let，避免类似的作用域问题。

这样修改后，双击输入框就能正确变红啦，后续删除选中项的功能也能基于正确的class来实现~

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