浅谈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 相关文章推荐
JS冒泡事件的快速解决方法
Dec 16 Javascript
浅谈JavaScript中的作用域和闭包问题
Jul 07 Javascript
Jquery 效果使用详解
Nov 23 Javascript
微信小程序 删除项目工程实现步骤
Nov 10 Javascript
EasyUI折叠表格层次显示detailview详解及实例
Dec 28 Javascript
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 Javascript
20170918 前端开发周报之JS前端开发必看
Sep 18 Javascript
js统计页面上每个标签的数量实例代码
May 29 Javascript
vue中引用swiper轮播插件的教程详解
Aug 16 Javascript
vue 实现websocket发送消息并实时接收消息
Dec 09 Javascript
Vue 嵌套路由使用总结(推荐)
Jan 13 Javascript
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
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面向对象法则
2012/02/23 PHP
深入eAccelerator与memcached的区别详解
2013/06/06 PHP
php检查字符串中是否包含7位GSM字符的方法
2015/03/17 PHP
ubuntu下配置nginx+php+mysql详解
2015/09/10 PHP
ie和firefox不兼容的解决方法集合
2009/04/28 Javascript
JavaScript 动态改变图片大小
2009/06/11 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
2015/04/21 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
JS模拟实现Select效果代码
2015/09/24 Javascript
简单介绍jsonp 使用小结
2016/01/27 Javascript
JS判断iframe是否加载完成的方法
2016/08/03 Javascript
JS弹性运动实现方法分析
2016/12/15 Javascript
js遮罩效果制作弹出注册界面效果
2017/01/25 Javascript
Three.js的使用及绘制基础3D图形详解
2017/04/27 Javascript
JS FormData上传文件的设置方法
2017/07/05 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
2017/08/17 Javascript
vue 路由页面之间实现用手指进行滑动的方法
2018/02/23 Javascript
详解Vue中使用Axios拦截器
2019/04/22 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
2019/06/24 Javascript
[54:54]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python3.6利用pyinstall打包py为exe的操作实例
2018/10/31 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
python中 * 的用法详解
2019/07/10 Python
Django命名URL和反向解析URL实现解析
2019/08/09 Python
Python实现Canny及Hough算法代码实例解析
2020/08/06 Python
财务管理专业应届毕业生求职信
2013/09/22 职场文书
学生拾金不昧表扬信
2014/01/21 职场文书
人事经理岗位职责
2014/04/28 职场文书
诚信的演讲稿范文
2014/05/12 职场文书
企业文化演讲稿
2014/05/20 职场文书
乡镇食品安全责任书
2014/07/28 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
爱国主义电影观后感
2015/06/18 职场文书
初中运动会前导词
2015/07/20 职场文书
小学体育教学随笔
2015/08/14 职场文书
2016七夕情人节寄语
2015/12/04 职场文书