如何为多个列表项分别实现独立的切换功能

本文讲解如何通过 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’)）。

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