如何为多个列表项中的每个切换按钮实现独立控制

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

+ 组合）添加交互逻辑。但若错误地为多个元素分配相同 id（例如 id="Btn" 或 id="liEl"），JavaScript 的 document.getElementById() 将只返回第一个匹配元素，导致事件绑定失效于其余项——这正是原始代码仅作用于首个

的根本原因。

正确做法是：改用 class 标识同类元素，并批量绑定事件。

首先，修正 HTML 结构，确保语义清晰且符合规范：

Target This element

toggle

注意：

• class 可重复使用，适合标记多个同类元素；
• 为提升可读性，类名建议采用连字符分隔（如 list-element、toggle-btn），避免下划线或驼峰式；
• 按钮与目标
• 保持相邻 DOM 顺序（按钮紧随
• 后），便于通过 previousElementSibling 精准定位。

接着，编写健壮的 JavaScript 逻辑：

const toggleButtons = document.querySelectorAll('.toggle-btn');

toggleButtons.forEach((btn, index) => {
  btn.addEventListener('click', () => {
    const targetLi = btn.previousElementSibling;
    if (targetLi && targetLi.classList.contains('list-element')) {
      targetLi.classList.toggle('done');
    }
  });
});

✅ 优势说明：

• 使用 querySelectorAll() 返回 NodeList，天然支持 forEach 迭代；
• 添加类型校验（if (targetLi && ...)），防止因 DOM 结构意外变动引发报错；
• 避免 getElementsByClassName() 返回的“动态集合”潜在陷阱（虽本例中影响不大，但 querySelectorAll 更推荐）。

配套 CSS 保持不变，用于视觉反馈：

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

? 进阶提示：
若未来需支持更复杂结构（如

...