浅谈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操纵Cookie实现购物车程序
Nov 23 Javascript
Add a Table to a Word Document
Jun 15 Javascript
javascript String 的扩展方法集合
Jun 01 Javascript
javascript下IE与FF兼容函数收集
Sep 17 Javascript
jquery.validate分组验证代码
Mar 17 Javascript
JS函数实现动态添加CSS样式表文件
Dec 15 Javascript
javascript中的parseInt和parseFloat区别
Jul 12 Javascript
jQuery实现的动态伸缩导航菜单实例
May 07 Javascript
Angular 2应用的8个主要构造块有哪些
Oct 17 Javascript
self.attachevent is not a function的解决方法
Apr 04 Javascript
vue使用rem实现 移动端屏幕适配
Sep 26 Javascript
jQuery实现轮播图效果
Nov 26 jQuery
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
4.与数据库的连接
2006/10/09 PHP
PHP中使用sleep函数实现定时任务实例分享
2014/08/21 PHP
ThinkPHP3.2.2的插件控制器功能
2015/03/05 PHP
WordPress的文章自动添加关键词及关键词的SEO优化
2016/03/01 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
jquery 图片截取工具jquery.imagecropper.js
2010/04/09 Javascript
JavaScript 更严格的相等 [译]
2012/09/20 Javascript
深入理解JQuery keyUp和keyDown的区别
2013/12/12 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
javascript删除一个html元素节点的方法
2014/12/20 Javascript
DOM基础教程之使用DOM设置文本框
2015/01/20 Javascript
点评js异步加载的4种方式
2015/12/22 Javascript
ES6中Math对象的部分扩展
2017/02/20 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
Webpack的dll功能使用
2018/06/28 Javascript
在vue项目中优雅的使用SVG的方法实例详解
2018/12/03 Javascript
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
2019/05/18 Javascript
基于iview-admin实现动态路由的示例代码
2019/10/02 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
2020/02/14 Javascript
JavaScript实现HTML导航栏下拉菜单
2020/11/25 Javascript
复制粘贴功能的Python程序
2008/04/04 Python
python绘制已知点的坐标的直线实例
2019/07/04 Python
Python 矩阵转置的几种方法小结
2019/12/02 Python
使用python去除图片白色像素的实例
2019/12/12 Python
pycharm激活码有效到2020年11月底
2020/09/18 Python
tensorflow中tf.slice和tf.gather切片函数的使用
2020/01/19 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
世界上最大的曲棍球商店:Pro Hockey Life
2017/10/30 全球购物
新英格兰最大的特色礼品连锁店:The Paper Store
2018/07/23 全球购物
大学生在校学习的自我评价
2014/02/18 职场文书
表决心的诗句大全
2014/03/11 职场文书
《学棋》教后反思
2014/04/14 职场文书
四年级学生评语大全
2014/04/21 职场文书
法英专业大学生职业生涯规划范文:衡外情,量己力!
2014/09/23 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书