JS闭包中的循环绑定处理程序
前几天工作中写前端js代码时，遇到了遍历元素给它添加单击事件。就是这个问题让我整整调了一个下午。最后还是下班回家，上网查资料才知道怎么解决的。 （PS：之前也在《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，对应的alert中的数字也是1到4。要是你也这样想，那就错了。
点击每个按钮，alert中都是显示数字4，没想到吧！
现在写几种解决方案，共大家参考 ！
第一种、编写一个function，在这个function中返回一个函数
<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>
第二种、使用立即调用函数表达式
(function(value){
//代码块
})(i)//这就是立即调用函数表达式
<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函数
<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对象。
JS闭包中的循环绑定处理程序的更多相关文章
- js闭包中的this（匿名函数中的this指向的是windows）
js闭包中的this(匿名函数中的this指向的是windows) 一.总结 1.普通函数中的this指向的是对象,匿名函数中的this指向的是windows,和全局变量一样 2.让匿名函数中的thi ...
- js闭包中注意文字总结
//闭包注意的点 //闭包中使用外部变量不是复制而是引用 //闭包可以节省传递参数问题 //在循环中使用闭包
- swift闭包中解决循环引用的问题
swift中可以通过三种方法解决循环引用的问题 利用类似oc方法解决循环引用weak var weakSelf = self weak var weakSelf = self loadData = { ...
- JS闭包中的this对象
我们知道,当函数被作为某个对象的方法调用时,this等于那个对象,不过,匿名函数的执行环境具有全局性,因此其this对象通常指向window. 下面代码很好的说明了这一点: var name = 'T ...
- JS&Jquery中的循环/遍历
JavaScript中的遍历 for 遍历 var anArray = ['one','two']; for(var n = 0; n < anArray.length; n++) { //具体 ...
- Angularjs 中 ng-repeat 循环绑定事件
用ng-repeat循环是如果有ng-click之类的事件需要传入参数我们一般这样写 <span class='del' ng-click="RemoveCost({{item.Id} ...
- 前端（十三）—— JavaScript高级：回调函数、闭包、循环绑定、面向对象、定时器
回调函数.闭包.循环绑定.面向对象.定时器 一.函数高级 1.函数回调 // 回调函数 function callback(data) {} // 逻辑函数 function func(callbac ...
- js闭包绑定元素
闭包,官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.闭包的特点: 1. 作为一个函数变量的一个引用,当函数返回时,其处于激活状 ...
- js闭包陷阱问题
JavaScript是一种非常强大的函数式编程语言,可以动态创建函数对象. 由于JavaScript还支持闭包(Closure),因此,函数可以引用其作用域外的变量,非常强大. 来看看在JavaScr ...
随机推荐
- 使用Postfix和Dovecot收发电子邮件
邮件应用协议包括: 简单邮件传输协议(SMTP),用来发送或中转发出的电子邮件,占用tcp 25端口. 第三版邮局协议(POP3),用于将服务器上把邮件存储到本地主机,占用tcp 110端口. 第四版 ...
- Python内置性能分析模块timeit
timeit模块 timeit模块可以用来测试一小段Python代码的执行速度. class timeit.Timer(stmt='pass', setup='pass', timer=<tim ...
- TYAttributedLabel——简单，强大的iOS属性文本控件
本文转载至 http://www.mobile-open.com/2015/86578.html TYAttributedLabel 简单,强大的属性文本的控件(无需了解CoreText),支持图文混 ...
- __declspec(dllimport)与__declspec(dllexport)作用总结
参考自:http://bbs.csdn.net/topics/330169671 __declspec(dllexport):导出符号,也就是定义需要导出函数的dll中给导出函数的函数声明前面加上导出 ...
- IOS多线程之线程属性的配置
版权声明:原创作品,谢绝转载!否则将追究法律责任. 设置线程堆栈的大小: 系统为每个你新创建的线程,都会为你的进程空间分配一定的内存作为该线程的堆栈.这里面有我们局部变量声明我们的方法就是一个堆栈 ...
- EGL 1.0 学习笔记
http://hi.baidu.com/leo_xxx/item/b01b1fc29abff355ac00ef5c 基本概念 EGL是OpenGL ES与本地Window系统之间的桥梁.EGL创建渲染 ...
- Google APK下载
在线下载google play中apk的网站 1.http://apps.evozi.com/apk-downloader 2.http://downloader-apk.com/ 3.http:// ...
- Storm启动流程分析
1. 客户端运行storm nimbus时,会调用storm的python脚本,该脚本中为每个命令编写一个方法,每个方法都可以生成一条相应的java命令. 命令格式如下:java -server xx ...
- Linux系统启动内幕
经过对Linux系统有了一定了解和熟悉后,想对其更深层次的东西做进一步探究.这当中就包括系统的启动流程.文件系统的组成结构.基于动态库和静态库的程序在执行时的异同.协议栈的架构和原理.驱动程序的机制等 ...
- Json.NET Deserialize时如何忽略$id等特殊属性
由于$id.$ref等是默认Json.NET的特殊属性,在反序列化时不会将其对应的值填充,例如: [DataContract] public class MyObject { [DataMember( ...