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 相关文章推荐
js chrome浏览器判断代码
Mar 28 Javascript
flash遮住div问题的正确解决方法
Feb 27 Javascript
DOM基础教程之使用DOM设置文本框
Jan 20 Javascript
详解JavaScript中的every()方法
Jun 08 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
Jun 03 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
Jul 27 Javascript
Angularjs 设置全局变量的方法总结
Oct 20 Javascript
微信小程序 Tab页切换更新数据
Jan 05 Javascript
jQuery简单获取DIV和A标签元素位置的方法
Feb 07 Javascript
详解Vue前端对axios的封装和使用
Apr 01 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
vue组件系列之TagsInput详解
May 14 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
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
php基于curl扩展制作跨平台的restfule 接口
2015/05/11 PHP
php实现的双色球算法示例
2017/06/20 PHP
Jquery图片滚动与幻灯片的实例代码
2013/04/08 Javascript
Jquery选中或取消radio示例
2013/09/29 Javascript
jQuery对指定元素中指定字符串进行替换的方法
2015/03/17 Javascript
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
2015/11/19 Javascript
jquery平滑滚动到顶部插件使用详解
2017/05/08 jQuery
详解如何用webpack打包一个网站应用项目
2017/07/12 Javascript
jQuery 实时保存页面动态添加的数据的示例
2017/08/14 jQuery
老生常谈JS中的继承及实现代码
2018/07/06 Javascript
Vue中使用sass实现换肤功能
2018/09/07 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
2018/11/26 Javascript
vue 获取视频时长的实例代码
2019/08/20 Javascript
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
[01:15:29]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第三局
2016/03/04 DOTA
基于Python3 逗号代码 和 字符图网格(详谈)
2017/06/22 Python
详解Python import方法引入模块的实例
2017/08/02 Python
Python读取图片为16进制表示简单代码
2018/01/19 Python
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
如何利用Pyecharts可视化微信好友
2019/07/04 Python
解决pytorch报错:AssertionError: Invalid device id的问题
2020/01/10 Python
jupyter notebook 多行输出实例
2020/04/09 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
配置H5的滚动条样式的示例代码
2018/03/09 HTML / CSS
Shopping happy life西班牙:以最优惠的价格提供最好的时尚配饰
2020/03/13 全球购物
加拿大户外探险购物网站:SAIL
2020/06/27 全球购物
广播电视新闻学专业应届生求职信
2013/10/08 职场文书
老公给老婆的道歉信
2014/01/10 职场文书
实习鉴定评语
2014/01/19 职场文书
详细的大学生创业计划书模板
2014/01/27 职场文书
简历的自我评价范文
2014/02/04 职场文书
行政专员岗位职责说明书
2014/09/01 职场文书
违反交通安全法检讨书
2014/10/24 职场文书
幼儿园教师教学反思
2016/03/02 职场文书