JavaScript遍历ID元素列表绑定点击事件返回undefined如何解决

• 循环变量使用var声明，var无块级作用域特性，整个循环过程共享同一个i变量。点击事件触发时循环早已执行完成，此时i的值等于memberB.length，超出节点列表的索引范围，因此memberB[i]返回undefined。
• 原代码存在语法问题：事件回调函数、for循环缺少对应的闭合花括号，运行时会直接抛出语法错误。
• 事件回调中不需要依赖循环索引获取点击元素，直接通过回调上下文即可拿到目标节点，逻辑更稳定。

最小改动版本 #

只需要把循环声明里的var替换为let，let会为每一轮循环创建独立的i绑定，回调触发时能拿到对应轮次的正确索引，同时补全原代码缺失的闭合括号即可：

const memberB = document.querySelectorAll('#memberA, #memberAA, #memberAAA');
for (let i = 0; i < memberB.length; i++) {
  memberB[i].onclick = function(){
    if(memberB[i].className == "open"){
      memberB[i].className = "";
    } else {
      memberB[i].className = "open";
    }
  }
}

推荐简化版本 #

不依赖循环索引，直接在回调里通过this获取当前绑定事件的元素，用原生classList.toggle方法直接实现类名切换，无需手写判断逻辑，代码更简洁。querySelectorAll返回的NodeList原生支持forEach遍历，不需要手写for循环：

const memberB = document.querySelectorAll('#memberA, #memberAA, #memberAAA');
memberB.forEach(element => {
  element.onclick = function() {
    // this指向当前触发点击的元素，toggle自动判断类名：存在就移除，不存在就添加
    this.classList.toggle('open');
  }
});

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