JS中批量给元素绑定事件过程中的相关问题使用闭包解决


Posted in Javascript onApril 15, 2013

在JS中,你写一个for循环的时候,内部的循环变量I其实是会保存在它运行的函数或类内的,所以你会发现你给元素批量绑定事件的时候,出现i=最后一个循环变量的值,这就很坑爹啊,解决的方案有2钟,
思路就是:把这个循环变量保存起来,不要让它的作用域在整个函数,而是在循环体内

1.使用闭包(如果你不懂闭包,请打开百度:www.baidu.com)
2.使用with关键字,with语法是with( obj ) { //使得可以在此直接访问obj的属性,而不用加obj.XXX }
代码示例:

<!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> 
<title>Untitled Page</title> 
<script type="text/javascript" src="jquery-1.7.2.js" ></script> 
<script type="text/javascript" language="javascript"> 
$(document).ready(function (){ 
function Ev(i){ 
this.index = i; 
this.click = function (){ 
alert(this.index ); 
} 
} 
for(var k=1; k<4; k++){ 
//闭包函数1 
// (function(x){ 
// $("#div" + x).click(function(){ 
// f(x); 
// }); 
// }(k)); 
//使用with关键字 
with ({i: k}){ 
$("#div" + i).click(function(){ 
f(i); 
}); 
} 
} 
var f = function (m){ 
alert(m); 
} 
}); 
</script> 
</head> 
<body> 
<div id="div1">1 
</div> 
<div id="div2">2 
</div> 
<div id="div3">3 
</div> 
</body> 
</html>
Javascript 相关文章推荐
javascript 表单规则集合对象
Jul 21 Javascript
JavaScript this调用规则说明
Mar 08 Javascript
JS操作图片(增,删,改) 例子
Apr 17 Javascript
简介JavaScript中的push()方法的使用
Jun 09 Javascript
javascript生成不重复的随机数
Jul 17 Javascript
CSS javascript 结合实现悬浮固定菜单效果
Aug 23 Javascript
Bootstrap Fileinput文件上传组件用法详解
May 10 Javascript
Jquery和Js获得元素标签名称的方法总结
Oct 08 Javascript
vue双向绑定简要分析
Mar 23 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
Oct 26 Javascript
使用ng-packagr打包Angular的方法示例
Sep 21 Javascript
openlayers实现地图弹窗
Sep 25 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
Apr 15 #Javascript
jquery获得页面元素的坐标值实现思路及代码
Apr 15 #Javascript
Extjs优化(二)Form表单提交通用实现
Apr 15 #Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
Apr 15 #Javascript
Extjs优化(一)删除冗余代码提高运行速度
Apr 15 #Javascript
Extjs Gird 支持中文拼音排序实现代码
Apr 15 #Javascript
jquery+css+ul模拟列表菜单具体实现思路
Apr 15 #Javascript
You might like
PHP的全局错误处理详解
2016/04/25 PHP
php截取视频指定帧为图片
2016/05/16 PHP
thinkphp Apache配置重启Apache1 restart 出错解决办法
2017/02/15 PHP
PHP+Apache环境中如何隐藏Apache版本
2017/11/24 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
2013/03/21 Javascript
简单的ajax连接库分享(不用jquery的ajax)
2014/01/19 Javascript
JS实现文字放大效果的方法
2015/03/03 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
2016/10/28 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
微信小程序教程系列之新建页面(4)
2017/04/17 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
2017/08/18 Javascript
深入理解vue-router之keep-alive
2017/08/31 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
vue+iview/elementUi实现城市多选
2019/03/28 Javascript
使用xampp将angular项目运行在web服务器的教程
2019/09/16 Javascript
如何实现iframe父子传参通信
2020/02/05 Javascript
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
python的迭代器与生成器实例详解
2014/07/16 Python
Python实现统计给定列表中指定数字出现次数的方法
2018/04/11 Python
从一次项目重构说起CSS3自定义变量在项目的使用方法
2021/03/01 HTML / CSS
怎样从/向数据文件读/写结构
2014/11/23 面试题
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
销售助理岗位职责
2014/02/21 职场文书
班级文化建设标语
2014/06/23 职场文书
班子成员四风问题自我剖析材料
2014/09/29 职场文书
2014个人年度工作总结
2014/12/15 职场文书
经验交流材料格式
2014/12/30 职场文书
教师个人总结范文
2015/02/11 职场文书
2015重阳节座谈会主持词
2015/07/30 职场文书
2016年暑假学生家长评语
2015/12/01 职场文书
jquery插件实现图片悬浮
2021/04/16 jQuery
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python
PHP中strval()函数实例用法
2021/06/07 PHP