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

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

Target This element
 

注意：

• 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; }

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

...