如何为多个列表项分别绑定独立的切换按钮

本文讲解如何通过 javascript 为页面中多个 `

Target This element

✅ 对应 CSS 样式（保持不变）：

.done {
  text-decoration: line-through;
  text-decoration-thickness: 0.2rem;
  text-decoration-color: red;
}

✅ 现代化 JavaScript 实现（推荐使用 forEach + closest 提升健壮性）：

document.querySelectorAll('.toggle-btn').forEach(button => {
  button.addEventListener('click', () => {
    // 向上查找最近的同级 
（更安全，不依赖固定 DOM 顺序）
    const listItem = button.previousElementSibling;
    if (listItem && listItem.classList.contains('list-item')) {
      listItem.classList.toggle('done');
    }
  });
});

⚠️ 注意事项：

• 避免重复 id：HTML 规范要求 id 全局唯一，违者将导致 JS 行为不可预测，且影响可访问性（如屏幕阅读器）。
• DOM 关系假设需谨慎：原方案依赖 previousElementSibling，前提是 紧邻
  且无其他元素插入。若结构可能变化（如加入图标、空格等），建议改用包裹容器（如 ）并配合 closest() 定位：

    
  Target This element
    

  toggle

  对应 JS：

  button.addEventListener('click', () => {
    const taskItem = button.closest('.task-item');
    const listItem = taskItem?.querySelector('.list-item');
    listItem?.classList.toggle('done');
  });

• 性能与兼容性：querySelectorAll + forEach 在现代浏览器中表现优异；若需支持 IE，可用 Array.from() 或传统 for 循环。

总结：实现多组独立交互的核心在于用类选择器批量获取元素，并为每个实例单独注册事件监听器，同时借助 DOM 遍历方法精准定位目标节点。这一模式可轻松扩展至其他场景（如展开/收起、启用/禁用、计数器等），是前端开发中的基础工程实践。