while循环绑定onclick函数失效，所有事件指向同一元素的解决方法

我有x个id为accordion_toggle__1至accordion_toggle__x的元素，希望给每个元素绑定onclick函数，点击时切换对应id为accordion__1至accordion__x元素的accordion__hidden类。尝试了以下代码：

let x=1;

while(!!document.getElementById("accordion_toggle__"+x)){
        document.getElementById("accordion_toggle__"+x).onclick = function(){
            document.getElementById("accordion__"+x).classList.toggle("accordion__hidden");
        }
        x++;
}

但代码无法正常工作，比如当有4个切换元素时，所有点击事件都试图操作不存在的accordion__5元素，请问该如何解决？

原因分析 #

这是闭包作用域的经典问题：循环中的变量x是共享的，当点击事件触发时，循环已经执行完毕，x的值已经变成了最后一次递增后的结果（比如4个元素时x=5），所以所有点击事件都会使用这个最终值去查找元素。

解决方案 #

方案1：用立即执行函数（IIFE）创建独立作用域 #

每次循环时，把当前的x值传入IIFE，形成独立的作用域保存这个值，避免后续循环修改影响点击事件：

let x = 1;
while (!!document.getElementById("accordion_toggle__" + x)) {
  (function(currentX) {
    document.getElementById("accordion_toggle__" + currentX).onclick = function() {
      document.getElementById("accordion__" + currentX).classList.toggle("accordion__hidden");
    };
  })(x);
  x++;
}

方案2：用let在循环内声明独立变量（ES6+） #

利用let的块级作用域特性，在循环内声明一个新变量保存当前的x值，每次循环都会创建独立的绑定：

let x = 1;
while (!!document.getElementById("accordion_toggle__" + x)) {
  let currentX = x;
  document.getElementById("accordion_toggle__" + currentX).onclick = function() {
    document.getElementById("accordion__" + currentX).classList.toggle("accordion__hidden");
  };
  x++;
}

方案3：事件委托（更推荐） #

不需要逐个元素绑定事件，利用事件冒泡给父容器绑定一次事件，通过触发元素的ID来定位目标元素。这种方法更高效，还支持动态添加的元素：

// 替换为实际的父容器ID或选择器
document.getElementById("accordion_parent").addEventListener("click", function(e) {
  const target = e.target;
  if (target.id.startsWith("accordion_toggle__")) {
    const index = target.id.split("__")[1];
    document.getElementById("accordion__" + index).classList.toggle("accordion__hidden");
  }
});

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