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 ...
随机推荐
- CoreData 多表 关联
本文转载至 http://www.jianshu.com/p/e9f3b5e0cd19 1.概念简介 coreData中存在复杂的数据关系时,一张表难以满足需求,此时就需要了解使用coreData多表 ...
- (iOS)判断GPS坐标是否在中国
博文转载至 http://blog.csdn.net/cuibo1123/article/details/45691631 火星坐标经纬度范围 由于火星坐标问题,所以需要判断一下经纬度是否在中国. 基 ...
- 【LeetCode OJ】Remove Duplicates from Sorted Array
题目:Given a sorted array, remove the duplicates in place such that each element appear only once and ...
- 《转载》图解Tomcat类加载机制
本文转载自http://www.cnblogs.com/xing901022/p/4574961.html 说到本篇的tomcat类加载机制,不得不说翻译学习tomcat的初衷. 之前实习的时候学习j ...
- web_qianduan
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"& ...
- 架设FTP Server-Windows Server 2012
架设FTP Server-Windows Server 2012 https://jingyan.baidu.com/article/03b2f78c75b9b65ea237ae84.html 在 ...
- Delphi XE开发 Android 开机自动启动
https://blog.csdn.net/tanqth/article/details/74357209 Android 下的广播 在Android下,要让我们开发的APP能在开机时自动启动,必须使 ...
- 微信内置浏览器浏览H5页面弹出的键盘遮盖文本框的解决办法（转）
最近在做微信公众号的内嵌页面,发现点击输入框时键盘盖住文本框,找到一段代码解决了这个问题. iOS和android手机都已亲测,需要的可以直接拷贝到代码中使用. js代码如下: $(function ...
- C#TreeView节点选中后失去焦点时改变节点背景色
C#TreeView节点选中后失去焦点时改变节点背景色 在使用TreeView控件时候,单击一个节点,当鼠标聚焦到别的地方的时候,之前点击的这个节点就看不清楚了 举例截图 单击后 ...
- axure rp ----专业的快速原型设计工具
Axure RPAxure的发音是』Ack-sure』,RP则是』Rapid Prototyping』快速原型的缩写.Axure RP Pro是美国Axure Software Solution公司的 ...