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 ...
随机推荐
- mybatis 之 parameterType="java.util.HashMap">
/** * 根据goods_no 和 goods_id 来查询商品信息 * * @param goodsNos * @return */ public List<Goods> getGoo ...
- Handler基本用法
片断一:mHandler = new Handler();mRunnable = new Runnable() { @Override public void run() { currentPosit ...
- 《Lua程序设计》第5章 函数 学习笔记
Lua为面向对象式的调用也提供了一种特殊的语法——冒号操作符.表达式o.foo(o, x)的另一种写法是o:foo(x),冒号操作符是调用o.foo时将o隐含地作为函数的第一个参数.Lua可以调用C语 ...
- leetCode练习题
1.求二叉树的最小深度: public class Solution { public int run(TreeNode root) { if(root==null) return 0; int l ...
- EventHandler 与常见的.Net预定义委托
看着下面这两句事件定义及激发忽然有点不明白了, public event EventHandler<ExternalDataEventArgs> Submit; Submit(null, ...
- 原生js--事件类型
1.表单事件: submit事件 reset事件 click事件 change事件 focus事件(不冒泡) (IE和ES5支持冒泡的focusin) blur事件(不冒泡) (IE和ES5支持冒泡的 ...
- 基于spring-cloud的微服务(1) 服务注册中心eureka
eureka是Netflix提供的服务注册中心组建,springcloud将其做了封装,作为自己的微服务架构中的一个注册中心组建 下面的例子在IDEA中启动一个eureka的实例,然后提供一个prov ...
- 【Servlet】关于RequestDispatcher的原理
RequestDispatcher简介 RequestDispatcher 代表请求的派发者.它有2个动作:forward 和 include .客户端对于任何一个请求,可以根据业务逻辑需要,选择不同 ...
- iOS － 国际化语言切换
iOS国际化:如何切换语言 1.国际化就是将标签.提示信息等信息放到资源文件中,随着程序需要的语言提供对应的资源文件.以key/value对存储,每个资源的key值不变,value随着需求改变. ...
- yii---对数组进行分页
很多时候,我们会对多个数据进行分页处理,例如我最近开发的一个功能,系统消息,系统消息的来源是多个表,而且多个表之间的数据没有任何关联,这个时候,需要对多个表进行查询,查询返回的数据进行分页,而且采用的 ...