浅谈JS闭包中的循环绑定处理程序


Posted in Javascript onNovember 09, 2014

前几天工作中写前端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闭包中的循环绑定处理程序的理解,分享给大家,希望能对小伙伴们有所帮助

Javascript 相关文章推荐
JavaScript 程序编码规范
Nov 23 Javascript
jqgrid 表格数据导出实例
Nov 21 Javascript
jquery插件hiAlert实现网页对话框美化
May 03 Javascript
js生成验证码并直接在前端判断
May 15 Javascript
Bootstrap实现响应式导航栏效果
Dec 28 Javascript
jquery+Jscex打造游戏力度条
Sep 12 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
Dec 14 Javascript
详解Vue中过度动画效果应用
May 25 Javascript
基于Axios 常用的请求方法别名(详解)
Mar 13 Javascript
微信小程序实现保存图片到相册功能
Nov 30 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
Jan 24 Javascript
微信小程序tabBar设置实例解析
Nov 14 Javascript
jQuery函数map()和each()介绍及异同点分析
Nov 08 #Javascript
js跨域问题浅析及解决方法优缺点对比
Nov 08 #Javascript
js 操作符汇总
Nov 08 #Javascript
jquery的总体架构分析及实现示例详解
Nov 08 #Javascript
jquery常用方法及使用示例汇总
Nov 08 #Javascript
JQuery遍历json数组的3种方法
Nov 08 #Javascript
JQuery中使用.each()遍历元素学习笔记
Nov 08 #Javascript
You might like
php对数组排序代码分享
2014/02/24 PHP
php实现源代码加密的方法
2015/07/11 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
PHP依赖注入原理与用法分析
2018/08/21 PHP
TP5(thinkPHP5框架)基于bootstrap实现的单图上传插件用法示例
2019/05/29 PHP
FormValidate 表单验证功能代码更新并提供下载
2008/08/23 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
2016/08/01 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
2016/10/26 Javascript
js+div+css下拉导航菜单完整代码分享
2016/12/28 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
2017/02/05 Javascript
深入理解Puppeteer的入门教程和实践
2019/03/05 Javascript
angular多语言配置详解
2019/05/16 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
NodeJS 文件夹拷贝以及删除功能
2019/09/03 NodeJs
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
在项目vue中使用echarts的操作步骤
2020/09/07 Javascript
Vue this.$router.push(参数)实现页面跳转操作
2020/09/09 Javascript
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
[01:33:59]真人秀《加油 DOTA》 第六期
2014/09/09 DOTA
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
html5视频自动横过来自适应页面且点击播放功能的实现
2020/06/03 HTML / CSS
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
英国电气世界:Electrical World
2019/09/08 全球购物
Intersport西班牙:在线体育商店
2019/11/06 全球购物
导师评语大全
2014/04/26 职场文书
职业规划实施方案
2014/06/10 职场文书
幼师求职信
2014/06/23 职场文书
婚前协议书范本两则
2014/10/16 职场文书
2014年小学数学教师工作总结
2014/12/03 职场文书
学生会个人总结范文
2015/02/15 职场文书
行政助理岗位职责范本
2015/04/11 职场文书
感恩教育观后感
2015/06/17 职场文书
python中Pyqt5使用Qlabel标签播放视频
2022/04/22 Python