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 相关文章推荐
Mootools 1.2教程 Fx.Tween的使用
Sep 15 Javascript
ext jquery 简单比较
Apr 07 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 Javascript
简单对比分析JavaScript中的apply,call与this的使用
Dec 04 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
May 25 Javascript
JQuery的attr 与 val区别
Jun 12 Javascript
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 Javascript
layer弹出层取消遮罩的方法
Sep 25 Javascript
微信小程序实现侧边分类栏
Oct 21 Javascript
js实现验证码干扰(静态)
Feb 22 Javascript
JS实现简单的九宫格抽奖
Jun 28 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中substr()函数参数说明及用法实例
2014/11/15 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
LNMP部署laravel以及xhprof安装使用教程
2017/09/14 PHP
javascript Base类 包含基本的方法
2009/07/22 Javascript
jquery实现奇偶行赋值不同css值
2012/02/17 Javascript
Google官方支持的NodeJS访问API,提供后台登录授权
2014/07/29 NodeJs
jQuery中element选择器用法实例
2014/12/29 Javascript
JavaScript获取页面中第一个锚定文本的方法
2015/04/03 Javascript
详解jQuery中关于Ajax的几个常用的函数
2017/07/17 jQuery
vue-cli4使用全局less文件中的变量配置操作
2020/10/21 Javascript
python+pygame简单画板实现代码实例
2017/12/13 Python
Python中一行和多行import模块问题
2018/04/01 Python
python 把文件中的每一行以数组的元素放入数组中的方法
2018/04/29 Python
Python应用库大全总结
2018/05/30 Python
python numpy 部分排序 寻找最大的前几个数的方法
2018/06/27 Python
Python字典遍历操作实例小结
2019/03/05 Python
python模块常用用法实例详解
2019/10/17 Python
python with (as)语句实例详解
2020/02/04 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
keras小技巧——获取某一个网络层的输出方式
2020/05/23 Python
python 使用cycle构造无限循环迭代器
2020/12/02 Python
HTML页面中添加Canvas标签示例
2015/01/01 HTML / CSS
GLAMGLOW香港官网:明星出镜前的秘密武器
2017/03/16 全球购物
HttpServlet类中的主要方法都有哪些?各自的作用是什么?
2014/03/16 面试题
写好求职应聘自荐信的三部曲
2013/09/21 职场文书
如何写好升职自荐信
2014/01/06 职场文书
研修第一天随笔感言
2014/02/15 职场文书
一帮一活动总结
2014/05/08 职场文书
交通运输局四风问题对照检查材料思想汇报
2014/10/09 职场文书
2015廉洁自律个人总结
2015/02/14 职场文书
2015年五一劳动节慰问信
2015/03/23 职场文书
2016师德师风学习心得体会
2016/01/12 职场文书
财务会计个人原因辞职信
2019/06/21 职场文书
Vue的生命周期一起来看看
2022/02/24 Vue.js