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 ...
随机推荐
- iOS autoLayout总结
本文转自 http://ruikq.github.io/ios/autolayout/uiscrollview/2015/01/27/iOS-autolayout%E6%80%BB%E7%BB%93. ...
- PHP域名解析（一个IP绑多域名）----看看可以，并不值得借鉴
PHP域名解析(一个IP绑多域名)----看看可以,并不值得借鉴 好处当然是不用买多网卡.不用设置其它端口为WEB端口了,一张网卡上.都用同一个80端口建很多网站. 假设有三个域名: [url ...
- window下线程同步之（Mutex（互斥器） )
使用方法: 1.创建一个互斥器:CreateMutex: 2.打开一个已经存在的互斥器:OpenMutex: 3.获得互斥器的拥有权:WaitForSingleObject.WaitForMultip ...
- PHP中const和define()定义常量的细节区别
转自:http://www.365mini.com/page/difference-of-define-and-const.htm 众所周知,在PHP中(php 4及以后),我们可以使用函数defin ...
- Win8交互UX——触摸板交互
针对触摸输入优化 Window 应用商店应用设计,并在默认情况下获得触摸板支持. 设计用户可以通过触摸板交互的 Windows 应用商店应用. 触摸板结合间接的多点触控输入和指针设备(如鼠标)的精确输 ...
- Android 反编译Apk提取XML文件
Apktool https://ibotpeaches.github.io/Apktool/install/ 下载地址:Apktool https://bitbucket.org/iBotPeache ...
- DOS 如何取当前时间做为文件名？
如果要取得以日期为文件名的文件,假设在命令行下键入date返回形式为:当前日期: 2005-06-02 星期四echo > %date:~0,4%%date:~5,2%%date:~8,2%~表 ...
- 流程图 --- BPMN规范简介
BPMN 目前 是2.0规范 http://www.bpmn.org/ BPMN Quick Guide http://blog.csdn.net/flygoa/article/details/5 ...
- 异构GoldenGate 12c 单向复制配置(支持DDL复制)
1.开始配置OGG支持DDL复制(在source端操作) 1.1 赋予权限 SQL> conn /as sysdba 已连接. SQL> grant execute on utl_file ...
- TX大手笔做业务必然失败的原因
首先说一个伪命题: 物体会向下落这是一个基本的定律,一个小小的物理规则会覆盖所有物体的行为准则. 那么,当地球上的所有东西都下落的时候,你指望整个地球,月球,太阳也会下落么? 事实上大家都知道星球在宇 ...