Todo List点击添加/删除按钮后选中样式失效，请求排查renderList函数

安全阿岳

2026-6-28

Todo List选中样式失效问题修复

问题根源及修复点：

类名拼写错误
在renderList函数中，给列表项添加选中类时出现拼写错误，导致CSS样式无法匹配：

// 错误写法
liContainer.classList.add("list", item.selected ? "selceted" : "not");
// 正确写法
liContainer.classList.add("list", item.selected ? "selected" : "not");

将selceted修正为selected，确保和CSS中的类名一致。

updateList函数逻辑错误
该函数中无论任务是否选中，都执行添加selected类的操作，完全没有处理取消选中的逻辑：

// 错误写法
if (task.selected) {
  listElement.classList.add("selected");
} else {
  listElement.classList.add("selected");
}
// 正确写法
if (task.selected) {
  listElement.classList.add("selected");
  listElement.classList.remove("not");
} else {
  listElement.classList.remove("selected");
  listElement.classList.add("not");
}

也可以用更简洁的toggle方法实现：

listElement.classList.toggle("selected", task.selected);
listElement.classList.toggle("not", !task.selected);

addList函数边界处理缺失
当输入为空时，list变量为undefined，直接推入数组会产生无效数据，需增加判断：

// 错误写法
lists.push(list);
// 正确写法
if (list) {
  lists.push(list);
}

冗余DOM操作优化
markSelected函数修改数据后调用updateList单独操作DOM，逻辑冗余且易出错，直接调用renderList重新渲染整个列表更可靠：

const markSelected = (id) => {
  lists = lists.map((list) => {
    if (list.id === id) {
      list.selected = !list.selected;
    }
    return list;
  });
  renderList(); // 替换原updateList(id)调用
};

优化后可直接删除updateList函数，简化代码逻辑。