本文讲解如何通过 javascript 为页面中多个 `
在实际开发中，使用 id 属性标识多个相同类型的元素（如多个 <li> 或 <button>）是常见误区——HTML 规范要求 id 必须全局唯一。一旦出现重复 ID（如多个 id="liEl" 或 id="Btn"），document.getElementById() 将只返回第一个匹配元素，导致后续按钮点击无效。因此，正确做法是改用 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 替代 id，确保结构合法； ✅ 为 <li> 和 <button> 分别赋予语义化类名（如 list-element / toggle-btn），便于后期样式与逻辑扩展。
✅ CSS 样式（增强视觉反馈）
.list-element.done {
text-decoration: line-through;
text-decoration-thickness: 0.2rem;
text-decoration-color: red;
opacity: 0.7;
}? 将 .done 类作用于 .list-element，避免样式污染；添加 opacity 提升用户体验。
✅ JavaScript 逻辑（健壮 + 面向未来）
// 获取所有按钮节点（返回 HTMLCollection）
const toggleButtons = document.querySelectorAll('.toggle-btn');
// 为每个按钮绑定点击事件
toggleButtons.forEach((btn, index) => {
btn.addEventListener('click', function () {
// 安全获取前一个同级 <li> 元素（使用 previousElementSibling）
const targetLi = this.previousElementSibling;
// 验证目标元素存在且为 <li>，防止 DOM 结构变动导致异常
if (targetLi && targetLi.tagName === 'LI') {
targetLi.classList.toggle('done');
}
});
});⚠️ 关键注意事项：
- 使用 document.querySelectorAll() 而非 getElementsByClassName()，前者返回静态 NodeList，更易配合 forEach；
- 采用 this.previousElementSibling 动态定位关联 <li>，不依赖索引，避免因 DOM 顺序调整失效；
- 添加 tagName 校验，提升代码鲁棒性；
- 若未来需支持“按钮在 <li> 内部”等不同布局，可改用 closest() + querySelector() 组合定位（例如：this.closest('li')?.classList.toggle('done')）。
该方案不仅解决了当前多按钮独立控制问题，还具备良好的可读性、可维护性与扩展性，符合现代前端开发最佳实践。
