本文解决动态添加待办事项时，复选框点击事件错误地仅作用于第一个任务文本的问题；核心在于避免全局查询（querySelector），改用 DOM 邻居关系（nextElementSibling）精准定位对应 元素，实现每项独立样式控制。
本文解决动态添加待办事项时，复选框点击事件错误地仅作用于第一个任务文本的问题；核心在于避免全局查询（`queryselector`），改用 dom 邻居关系（`nextelementsibling`）精准定位对应 `
` 元素，实现每项独立样式控制。
在上述代码中，问题根源在于 lineThrough() 函数内使用了 document.querySelector(".task") —— 该方法始终返回文档中第一个匹配 .task 的元素，而非当前复选框所关联的任务文本。因此，无论点击哪个复选框，样式都只作用于首个
，导致交互完全失效。
正确的做法是利用 HTML 结构的局部性：每个 .done 复选框与其对应的 .task
标签同属一个父容器
，且按顺序相邻（复选框在前，
在后）。因此，可直接通过 c.nextElementSibling 获取当前复选框的下一个兄弟元素，即其专属任务文本：
function lineThrough() {
const checkboxes = document.querySelectorAll(".done");
checkboxes.forEach((checkbox) => {
checkbox.addEventListener("click", () => {
// ✅ 正确：获取当前 checkbox 的紧邻下一个兄弟元素（即对应 .task）
const task = checkbox.nextElementSibling;
if (checkbox.checked) {
task.style.textDecoration = "line-through";
task.style.color = "gray";
} else {
task.style.textDecoration = "none"; // 推荐用 "none" 替代 "unset"
task.style.color = ""; // 清空内联样式，回归 CSS 默认值
}
});
});
}
⚠️ 关键注意事项：
- 避免重复绑定事件：当前逻辑每次新增任务后都会重新遍历所有复选框并绑定监听器，导致已有复选框被重复绑定（产生多次执行）。推荐改为事件委托（委托给 .to_dos_container），或仅对新添加的复选框绑定事件。
- 结构强依赖：nextElementSibling 要求 .task 必须严格作为 .done 的下一个兄弟节点。若 HTML 结构变更（如插入其他元素），需改用更健壮的方式，例如为每个 .task_container 设置唯一 ID 或 data 属性进行关联。
- 样式重置建议：使用 task.style.color = "" 清空内联样式，比 unset 更可靠，确保回退到 CSS 原始定义；textDecoration 同理，"none" 是标准值。
✅ 优化建议（事件委托版）——推荐用于生产环境：
// 一次性绑定，无需重复调用 lineThrough()
container.addEventListener("change", (e) => {
if (e.target.classList.contains("done")) {
const task = e.target.nextElementSibling;
if (task && task.classList.contains("task")) {
task.style.textDecoration = e.target.checked ? "line-through" : "none";
task.style.color = e.target.checked ? "gray" : "";
}
}
});
此方案彻底消除重复绑定风险，提升性能与可维护性。
