浅谈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 相关文章推荐
addRule在firefox下的兼容写法
Nov 30 Javascript
基于jquery实现的服务器验证控件的启用和禁用代码
Apr 27 Javascript
jQuery学习之prop和attr的区别示例介绍
Nov 15 Javascript
JS实现侧悬浮浮动实例代码
Nov 29 Javascript
js操作DOM--添加、删除节点的简单实例
Jul 08 Javascript
完美JQuery图片切换效果的简单实现
Jul 21 Javascript
AngularJS入门教程之静态模板详解
Aug 18 Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
Jan 04 Javascript
官方推荐react-navigation的具体使用详解
May 08 Javascript
使用electron将vue-cli项目打包成exe的方法
Sep 29 Javascript
react写一个select组件的实现代码
Apr 03 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
Jun 28 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
记录mysql性能查询过程的使用方法
2013/05/02 PHP
PHP小教程之实现双向链表
2014/06/12 PHP
学习php设计模式 php实现状态模式
2015/12/07 PHP
php PDO异常处理详解
2016/11/20 PHP
PHP面向对象程序设计方法实例详解
2016/12/24 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
JavaScript prototype属性使用说明
2010/05/13 Javascript
jquery scroll()区分横向纵向滚动条的方法
2014/04/04 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
2015/09/17 Javascript
JS组件中bootstrap multiselect两大组件较量
2016/01/26 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
手机端js和html5刮刮卡效果
2020/09/29 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
2017/01/05 Javascript
利用Node.js+Koa框架实现前后端交互的方法
2017/02/27 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
2017/03/09 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
vue获取dom元素注意事项
2017/12/28 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
layui table 参数设置方法
2018/08/14 Javascript
AngularJS自定义表单验证功能实例详解
2018/08/24 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
[48:51]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第一场 11.28
2020/12/02 DOTA
Python中使用haystack实现django全文检索搜索引擎功能
2017/08/26 Python
对Python中gensim库word2vec的使用详解
2018/05/08 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
Python 一行代码能实现丧心病狂的功能
2020/01/18 Python
Python requests HTTP验证登录实现流程
2020/11/05 Python
用html5绘制折线图的实例代码
2016/03/25 HTML / CSS
俄罗斯建筑和装饰材料在线商店:Stroilandia
2020/07/25 全球购物
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
停电放假通知
2015/04/14 职场文书
化验室安全管理制度
2015/08/06 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书
如何撰写促销方案?
2019/07/05 职场文书