JavaScript代码求助：为类元素绑定点击事件按索引触发弹窗失败

你遇到的是典型的闭包变量绑定陷阱：在循环里用var声明的i是函数级（或全局）变量，所有点击事件的回调函数都会共享同一个i引用。当用户点击按钮时，循环早就执行完了，i的值已经变成了buttons.length，所以每次调用switchBtn(i)都会传入这个最终值，永远触发default分支。

按照你要求的「基于当前代码逻辑」来修复，我们可以通过**立即执行函数表达式（IIFE）**给每个循环迭代创建独立的作用域，把当前的i值「固定」下来，修改后的代码如下：

var buttons = document.getElementsByClassName("openbtn");
var i;
for (i = 0; i < buttons.length; i += 1) {
  // 用IIFE创建独立作用域，保存当前迭代的i值
  (function(currentIndex) {
    buttons[currentIndex].addEventListener("click", function () {
      switchBtn(currentIndex);
    });
  })(i);
}
function switchBtn(index) {
  switch (index) {
    case 0:
      prompt("case0");
      break;
    case 1:
      prompt("case1");
      break;
    default:
      alert(index);
      break;
  }
}

为什么这样能行？ #

每次循环时，我们把当前的i作为参数传给IIFE，IIFE内部的currentIndex会捕获这个值并形成独立的作用域。每个点击回调函数引用的都是对应作用域里的currentIndex，而不是共享的i，这样点击不同按钮时就会传入正确的索引了。

如果你想用更简洁的写法（不破坏原逻辑核心的前提下），也可以把循环里的var i改成let i——ES6的let会在每个循环迭代自动创建块级作用域，帮我们自动保存当前索引：

var buttons = document.getElementsByClassName("openbtn");
// 把var改成let，自动创建块级作用域
for (let i = 0; i < buttons.length; i += 1) {
  buttons[i].addEventListener("click", function () {
    switchBtn(i);
  });
}
function switchBtn(index) {
  switch (index) {
    case 0:
      prompt("case0");
      break;
    case 1:
      prompt("case1");
      break;
    default:
      alert(index);
      break;
  }
}

不过你明确要求贴合当前代码逻辑，第一种IIFE的方案完全保留了你原有的代码结构，只是通过作用域包裹解决了变量共享的问题。

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