如何通过JavaScript DOM事件切换列表元素CSS类？代码异常求助

核心错误点 #

1. 事件绑定方式错误：addEventListener的第二个参数需要传递函数引用，但你直接写了checkItem(i)，这会立即执行函数，导致页面加载时就触发类切换，而非点击时触发。
2. 动态集合与循环越界：getElementsByClassName返回的是动态HTMLCollection，当你切换line-through类时，集合内的元素会被自动移除，导致长度变化。加上循环条件用了i <= list.length，会让索引超出有效范围，引发undefined错误。
3. 变量作用域问题：用var声明的i在循环中是全局共享的，即使事件绑定成功，后续点击时i的值已经是循环结束后的数值，无法正确对应元素索引。

修正方案 #

推荐使用静态集合+直接操作当前元素的方式，代码更简洁稳定：

HTML（保持不变）

<ul>
    <li class="items line-through">Watch</li>
    <li class="items line-through">Shoes</li>
    <li class="items line-through">Cake</li>
</ul>

JavaScript 修正版

// 用querySelectorAll获取所有li.items，返回静态NodeList，不受类变化影响
const list = document.querySelectorAll('.items');

// 事件处理函数直接操作当前点击的元素（this指向触发点击的li）
function checkItem() {
    this.classList.toggle('line-through');
}

// 循环绑定事件，用let声明i避免作用域问题
for (let i = 0; i < list.length; i++) {
    list[i].addEventListener('click', checkItem);
}

// 或者更简洁的forEach写法：
// list.forEach(item => item.addEventListener('click', checkItem));

原代码逐点修复说明 #

• 如果非要保留索引传递逻辑，需要用闭包返回新函数，同时改用静态集合避免动态变化问题：

const list = document.querySelectorAll('.items');

function checkItem(index) {
    return function() {
        list[index].classList.toggle('line-through');
    }
}

for (let i = 0; i < list.length; i++) {
    list[i].addEventListener('click', checkItem(i));
}

这里checkItem(i)返回一个新函数，只有点击时才会执行内部逻辑，避免页面加载时触发。

• 必须修正循环条件：将i <= list.length改为i < list.length，因为元素索引从0开始，3个元素的有效索引是0、1、2，当i等于3时会超出范围。

内容的提问来源于stack exchange，提问作者Oliver