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 阴影插件代码分享
Jan 09 Javascript
jQuery 过滤not()与filter()实例代码
May 10 Javascript
js实现对table动态添加、删除和更新的方法
Feb 10 Javascript
详解Angular 开发环境搭建
Jun 22 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
Nov 26 Javascript
vue.js将时间戳转化为日期格式的实现代码
Jun 05 Javascript
在小程序中使用canvas的方法示例
Sep 17 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
Jan 27 Javascript
vue选项卡切换登录方式小案例
Sep 27 Javascript
微信小程序实现点击图片放大预览
Oct 21 Javascript
Vue如何基于vue-i18n实现多国语言兼容
Jul 17 Javascript
微信小游戏中three.js离屏画布的示例代码
Oct 12 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 和 MySQL 基础教程(一)
2006/10/09 PHP
php连接mssql数据库的几种方法
2013/02/21 PHP
php中get_object_vars()方法用法实例
2015/02/08 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
分享15个大家都熟知的jquery小技巧
2015/12/02 Javascript
JQuery实现Ajax加载图片的方法
2015/12/24 Javascript
jQuery取得元素标签名称小结(附代码)
2017/08/16 jQuery
JS实现用特殊符号替换字符串的中间部分区域的实例代码
2018/07/24 Javascript
vue初始化动画加载的实例
2018/09/01 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
2020/02/11 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
2020/06/10 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
[29:10]Ti4 冒泡赛第二天 NEWBEE vs Titan 3
2014/07/15 DOTA
Python 执行字符串表达式函数(eval exec execfile)
2014/08/11 Python
Python中字典的基本知识初步介绍
2015/05/21 Python
python如何重载模块实例解析
2018/01/25 Python
Python实现的简单计算器功能详解
2018/08/25 Python
python实现的汉诺塔算法示例
2019/10/23 Python
python实现的多任务版udp聊天器功能案例
2019/11/13 Python
python爬虫开发之使用Python爬虫库requests多线程抓取猫眼电影TOP100实例
2020/03/10 Python
深入浅析Python 命令行模块 Click
2020/03/11 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
乌克兰网上珠宝商店:GoldSoveren
2020/03/31 全球购物
Java中会存在内存泄漏吗,请简单描述
2016/12/22 面试题
创联软件面试题笔试题
2012/10/07 面试题
英文求职信写作小建议
2014/02/16 职场文书
个人四风问题对照检查材料思想汇报
2014/10/06 职场文书
2015元旦标语横幅
2014/12/09 职场文书
高中教师个人工作总结
2015/02/10 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
导游词之桂林山水
2019/09/20 职场文书
pytorch Dropout过拟合的操作
2021/05/27 Python