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实现浏览器菜单命令
Sep 05 Javascript
在javascript将NodeList作为Array数组处理的方法
Jul 09 Javascript
javascript 45种缓动效果 非常酷
Jun 28 Javascript
javascript中的注释使用与注意事项小结
Sep 20 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
May 01 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
Nov 23 Javascript
实例讲解jquery与json的结合
Jan 07 Javascript
使用JS 插件qrcode.js生成二维码功能
Feb 20 Javascript
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
详解AngularJS用Interceptors来统一处理HTTP请求和响应
Jun 08 Javascript
vue.js 实现点击按钮动态添加li的方法
Sep 07 Javascript
JS数组实现分类统计实例代码
Sep 30 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数组函数序列之array_splice() - 在数组任意位置插入元素
2011/11/07 PHP
修改apache配置文件去除thinkphp url中的index.php
2014/01/17 PHP
php单例模式的简单实现方法
2016/06/10 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
JQuery 表单中textarea字数限制实现代码
2009/12/07 Javascript
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
js优化针对IE6.0起作用(详细整理)
2012/12/25 Javascript
html向js方法传递参数具体实现
2013/08/08 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
2014/05/04 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
2015/07/27 Javascript
总结在前端排序中遇到的问题
2016/07/19 Javascript
Json按某个键的值进行排序
2016/12/22 Javascript
bootstarp modal框居中显示的实现代码
2017/02/18 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
2017/04/26 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
Vue数据绑定简析小结
2019/05/07 Javascript
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
Python操作CouchDB数据库简单示例
2015/03/10 Python
Python中强大的命令行库click入门教程
2016/12/26 Python
Python中optparser库用法实例详解
2018/01/26 Python
Python实现识别手写数字 简易图片存储管理系统
2018/01/29 Python
利用python将pdf输出为txt的实例讲解
2018/04/23 Python
flask中过滤器的使用详解
2018/08/01 Python
在Pandas中给多层索引降级的方法
2018/11/16 Python
Python3.7 dataclass使用指南小结
2019/02/22 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
python输出带颜色字体实例方法
2019/09/01 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
postman和python mock测试过程图解
2020/02/22 Python
京剧自荐信
2014/01/26 职场文书
前台接待岗位职责
2015/02/03 职场文书
服装店员工管理制度
2015/08/07 职场文书
GO语言异常处理分析 err接口及defer延迟
2022/04/14 Golang
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server