JavaScript中循环存储getElementById元素并绑定点击事件失效求助

你这段循环代码失效的核心原因是闭包的变量共享问题：循环里用var声明的i属于外层作用域，所有点击事件的回调函数都共享同一个i变量。等循环执行完毕，i的值已经变成12了，不管点击哪个元素，最终都会调用revealCard(12)，自然达不到预期效果。

下面是三种可行的解决方法：

方法一：用let声明循环变量（ES6+，最简洁） #

let在for循环中会为每次迭代创建独立的块级作用域，每个回调函数引用的都是当前迭代的i值：

var c = [];
for(let i=0; i<12; i++)
{
    c[i] = document.getElementById('c'+i);
    c[i].addEventListener("click", function() {revealCard(i); });
}

方法二：立即执行函数（IIFE）封装变量 #

通过立即执行函数把每次迭代的i值封装到独立作用域里，避免变量共享：

var c = [];
for(var i=0; i<12; i++)
{
    (function(index) {
        c[index] = document.getElementById('c'+index);
        c[index].addEventListener("click", function() {revealCard(index); });
    })(i);
}

方法三：用bind绑定参数 #

直接通过bind把当前的i值作为参数绑定到revealCard函数上，省去额外闭包：

var c = [];
for(var i=0; i<12; i++)
{
    c[i] = document.getElementById('c'+i);
    c[i].addEventListener("click", revealCard.bind(null, i));
}

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