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

在实际开发中，我们常需为一组结构相似的元素（如任务列表）添加交互功能。例如：每项后配一个“toggle”按钮，点击后仅该行文本添加 .done 类以显示删除线效果。但若直接复制相同 id（如 id="Btn" 或 id="liEl"），会导致 document.getElementById() 始终只返回第一个匹配元素——这正是原始代码仅作用于首项的根本原因。

正确做法是：用 class 替代 id 实现批量选择，并为每个按钮单独绑定事件处理逻辑。

✅ 推荐 HTML 结构（语义化 + 可维护）：

<li class="list-item">Target This element</li>
<button class="toggle-btn">toggle</button>

<li class="list-item">Target This element</li>
<button class="toggle-btn">toggle</button>

<li class="list-item">Target This element</li>
<button class="toggle-btn">toggle</button>

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

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

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

ModelGate

一站式AI模型管理与调用工具

下载

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

⚠️ 注意事项：

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

  <div class="task-item">
    <li>Target This element</li>
    <button class="toggle-btn">toggle</button>
  </div>

  对应 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 遍历方法精准定位目标节点。这一模式可轻松扩展至其他场景（如展开/收起、启用/禁用、计数器等），是前端开发中的基础工程实践。