本文讲解如何通过 javascript 为页面中多个 `
在实际开发中，我们常需要为一组结构相似的 DOM 元素（如多个 <li> + <button> 组合）添加交互逻辑。但若错误地为多个元素分配相同 id（例如 id="Btn" 或 id="liEl"），JavaScript 的 document.getElementById() 将只返回第一个匹配元素，导致事件绑定失效于其余项——这正是原始代码仅作用于首个 <li> 的根本原因。
正确做法是：改用 class 标识同类元素，并批量绑定事件。
首先，修正 HTML 结构，确保语义清晰且符合规范：
<li class="list-element">Target This element</li> <button class="toggle-btn">toggle</button> <li class="list-element">Target This element</li> <button class="toggle-btn">toggle</button> <li class="list-element">Target This element</li> <button class="toggle-btn">toggle</button>
注意：
- class 可重复使用，适合标记多个同类元素；
- 为提升可读性，类名建议采用连字符分隔（如 list-element、toggle-btn），避免下划线或驼峰式；
- 按钮与目标 <li> 保持相邻 DOM 顺序（按钮紧随 <li> 后），便于通过 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;
}? 进阶提示：
若未来需支持更复杂结构（如 <li> 与 <button> 不相邻），可改用 data-* 属性建立显式关联，例如：
<li class="list-element" data-id="item-1">...</li> <button class="toggle-btn" data-target="item-1">toggle</button>
再通过 document.querySelector('[data-id="' + targetId + '"]') 精确查找——这使 DOM 布局更灵活，也更利于维护。
总结：唯一 id 是硬性规范，批量操作请拥抱 class + querySelectorAll + forEach 组合，辅以合理的 DOM 关系判断，即可高效、可靠地实现多元素独立交互。
