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

本文讲解如何通过 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