17370845950

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

Target This element

✅ 使用 class 替代 id，确保结构合法； ✅ 为 和 分别赋予语义化类名（如 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 () {
    // 安全获取前一个同级 
 元素（使用 previousElementSibling）
    const targetLi = this.previousElementSibling;

    // 验证目标元素存在且为 
，防止 DOM 结构变动导致异常
    if (targetLi && targetLi.tagName === 'LI') {
      targetLi.classList.toggle('done');
    }
  });
});

⚠️ 关键注意事项：

• 使用 document.querySelectorAll() 而非 getElementsByClassName()，前者返回静态 NodeList，更易配合 forEach；
• 采用 this.previousElementSibling 动态定位关联
• ，不依赖索引，避免因 DOM 顺序调整失效；
• 添加 tagName 校验，提升代码鲁棒性；
• 若未来需支持“按钮在
• 内部”等不同布局，可改用 closest() + querySelector() 组合定位（例如：this.closest('li')?.classList.toggle('done')）。

该方案不仅解决了当前多按钮独立控制问题，还具备良好的可读性、可维护性与扩展性，符合现代前端开发最佳实践。