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 相关文章推荐
浅析jQuery的链式调用之each函数
Dec 03 Javascript
按Enter键触发事件的jquery方法实现代码
Feb 17 Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 Javascript
jQuery中andSelf()方法用法实例
Jan 08 Javascript
JavaScript判断数组是否包含指定元素的方法
Jul 01 Javascript
javascript随机抽取0-100之间不重复的10个数
Feb 25 Javascript
解决vue的 v-for 循环中图片加载路径问题
Sep 03 Javascript
浅谈Angular7 项目开发总结
Dec 19 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
Jan 30 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
Sep 12 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 05 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
全国FM电台频率大全 - 17 湖北省
2020/03/11 无线电
叶罗丽:为什么大家对颜冰这对CP非常关心,却对金茉两人十分冷漠
2020/03/17 国漫
mysql From_unixtime及UNIX_TIMESTAMP及DATE_FORMAT日期函数
2010/03/21 PHP
php计算十二星座的函数代码
2012/08/21 PHP
php比较两个绝对时间的大小
2014/01/31 PHP
Yii中实现处理前后台登录的新方法
2015/12/28 PHP
Zend Framework入门知识点小结
2016/03/19 PHP
php将html转为图片的实现方法
2017/05/19 PHP
PHP CURL实现模拟登陆并上传文件操作示例
2020/01/02 PHP
js 操作css实现代码
2009/06/11 Javascript
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
2013/10/24 Javascript
extjs4 treepanel动态改变行高度示例
2013/12/17 Javascript
详解js私有作用域中创建特权方法
2016/01/25 Javascript
AngularJS 工作原理详解
2016/08/18 Javascript
JS实现的幻灯片切换显示效果
2016/09/07 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
详解微信小程序设置底部导航栏目方法
2017/06/29 Javascript
Angular实现表单验证功能
2017/11/13 Javascript
使用layui的router来进行传参的实现方法
2019/09/06 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
Python编程使用NLTK进行自然语言处理详解
2017/11/16 Python
python整合ffmpeg实现视频文件的批量转换
2019/05/31 Python
Django restframework 框架认证、权限、限流用法示例
2019/12/21 Python
解决keras使用cov1D函数的输入问题
2020/06/29 Python
Python通过字典映射函数实现switch
2020/11/06 Python
Python 实现一个简单的web服务器
2021/01/03 Python
HTML5 中新的全局属性(整理)
2013/07/31 HTML / CSS
联强国际笔试题面试题
2013/07/10 面试题
土木工程毕业生自荐信
2013/09/21 职场文书
小学生安全保证书
2014/02/01 职场文书
经理秘书求职自荐信范文
2014/03/23 职场文书
考研复习计划
2015/01/19 职场文书
原来闭幕词是这样写的呀!
2019/07/01 职场文书