为何HTML元素添加/移除类名仅单向生效？

嘿，我一眼就看出问题出在哪了！你的代码之所以只能单向切换，核心原因是事件绑定是一次性的，而且初始状态下没有元素能触发undoTask函数。

问题根源拆解 #

• 初始绑定完全失效：页面加载时所有<li>都带open类，document.querySelectorAll("li.closed")返回的是空集合，所以你后面那三行绑定undoTask的代码根本没给任何元素挂上事件，等于白写了。
• 事件不会随类名变化自动切换：你给初始带open类的元素绑定了doTask，就算后来这些元素的类名变成closed了，它们身上的点击事件还是doTask——点了之后依然会执行remove("open")+add("closed")，自然切不回open状态。

修复方案：用统一的切换函数 #

最简洁的办法是写一个通用的处理函数，每次点击时判断当前元素的类名，然后做对应的切换，这样不管初始状态是什么，都能双向切换。

修改后的JS代码：

function toggleTaskStatus(event) {
  const target = event.target;
  // 判断当前类名，执行对应切换逻辑
  if (target.classList.contains("open")) {
    target.classList.remove("open");
    target.classList.add("closed");
  } else {
    target.classList.remove("closed");
    target.classList.add("open");
  }
}

function setup() {
  // 给所有li绑定同一个切换函数
  document.querySelectorAll("li").forEach(li => {
    li.addEventListener("click", toggleTaskStatus);
  });
}

window.addEventListener("load", setup);

更优雅的写法：利用classList.toggle #

其实DOM的classList自带toggle方法，可以直接帮你切换类名，代码能更简洁：

function toggleTaskStatus(event) {
  const target = event.target;
  // 同时切换两个类：有open就移除、加closed，反之亦然
  target.classList.toggle("open");
  target.classList.toggle("closed");
}

function setup() {
  document.querySelectorAll("li").forEach(li => {
    li.addEventListener("click", toggleTaskStatus);
  });
}

window.addEventListener("load", setup);

这样修改后，不管你点击的元素当前是open还是closed，都能完美切换状态啦～

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