本文分析在JavaScript循环中为多个元素绑定单击事件时，因闭包变量引用导致的点击结果错误问题。通过定义返回函数的普通函数、立即调用函数表达式（IIFE）以及jQuery的each方法三种方式，展示了如何正确捕获循环变量值，确保每个按钮点击时弹出对应的索引数字。
问题背景与错误示例
在前端开发中，有时需要遍历一组元素并为它们分别添加单击事件。笔者曾因此问题耗费大量调试时间，最终通过查阅资料才找到解决思路。尽管《jQuery基础教程》第四版中曾提及此类循环绑定处理程序的内容，但当时并未深入理解，导致遗忘。本文旨在为遇到类似困惑的初学者提供参考，资深开发者可略过。
首先展示一个典型的错误示例，该示例依赖jQuery库，使用前请确保已正确引入jQuery文件。
具体代码实现如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>循环绑定处理程序</title>
<script src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
for(var i=1;i<=4;i++){
"#btn"+i).get(0).onclick=function(){
alert(i);
}
}
});
</script>
</head>
<body>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
<button id="btn4">按钮4</button>
</body>
</html>运行上述代码后，点击各个按钮，弹出的alert对话框中显示的数字并非预期的1到4。许多初学者会误以为按钮1到4分别对应弹出数字1到4，但实际运行结果与这一直觉相悖。
实际上，无论点击哪个按钮，alert弹出的都是数字4。这一现象令人意外，却揭示了闭包在循环中的常见陷阱。
解决方案一：返回函数的普通函数
接下来介绍几种有效的解决方案，供读者参考实践。
第一种方案是编写一个普通函数，该函数返回一个新的函数。
相关代码如下：
<script type="text/javascript">
$(function(){
for(var i=1;i<=4;i++){
"#btn"+i).get(0).onclick=btnClick(i);
}
});
var btnClick=function(value){
return function(){
alert(value);
}
}
</script>解决方案二：立即调用函数表达式
第二种方案是利用立即调用函数表达式（IIFE）。
具体代码示例如下：
<script type="text/javascript">
$(function(){
for(var i=1;i<=4;i++){
"#btn"+i).get(0).onclick=(function(value){
return function(){
alert(value);
} })(i);
}
});
</script>解决方案三：jQuery each方法
第三种方案是使用jQuery提供的each函数进行遍历绑定。
实现代码如下：
<script type="text/javascript">
$(function(){
$.each([1,2,3,4],function(index,value){
"#btn"+value).get(0).onclick=function(){
alert(value);
}
});
});
</script>采用上述三种方法中的任意一种，均可避免最初提到的点击结果错误问题。需要注意的是，代码中的get(0)方法用于将jQuery对象转换为原生DOM对象，以便直接操作其onclick属性。
以上是对JavaScript闭包在循环绑定事件处理中常见问题的个人理解与总结，希望对各位开发者有所帮助。