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 相关文章推荐
javascript实现的元素拖动函数宿主为浏览器
Jul 21 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
jQuery 判断图片是否加载完成方法汇总
Aug 10 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
Oct 20 Javascript
JavaScript 消息框效果【实现代码】
Apr 27 Javascript
AngularJS中transclude用法详解
Nov 03 Javascript
简单实现js放大镜效果
Jul 24 Javascript
纯js封装的ajax功能函数与用法示例
May 14 Javascript
react中使用swiper的具体方法
May 15 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
Aug 30 Javascript
vue项目引入Iconfont图标库的教程图解
Oct 24 Javascript
JavaScript运行机制实例分析
Apr 11 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开发工具之vs2005图解
2008/01/12 PHP
php 删除记录实现代码
2009/03/12 PHP
php中禁止单个IP与ip段访问的代码小结
2012/07/04 PHP
laravel 判断查询数据库返回值的例子
2019/10/11 PHP
拖拉表格的JS函数
2008/11/20 Javascript
jquery购物车实时结算特效实现思路
2013/09/23 Javascript
字段太多jquey快速清空表单内容方法
2014/08/21 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
2015/04/28 Javascript
微信小程序 获取二维码实例详解
2017/06/23 Javascript
three.js中文文档学习之创建场景
2017/11/20 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
2018/03/02 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
2018/09/03 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
2018/10/08 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
2019/11/01 Javascript
JS 事件机制完整示例分析
2020/01/15 Javascript
vue 项目引入echarts 添加点击事件操作
2020/09/09 Javascript
浅析VUE防抖与节流
2020/11/24 Vue.js
python self,cls,decorator的理解
2009/07/13 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
pthon贪吃蛇游戏详细代码
2019/01/27 Python
python3字符串操作总结
2019/07/24 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
django迁移文件migrations的实现
2020/03/31 Python
Anaconda配置pytorch-gpu虚拟环境的图文教程
2020/04/16 Python
Python3如何在服务器打印资产信息
2020/08/27 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
利用html5 file api读取本地文件示例(如图片、PDF等)
2018/03/07 HTML / CSS
医药大学生求职简历的自我评价
2013/10/17 职场文书
报名委托书
2015/01/29 职场文书
学期个人工作总结
2015/02/13 职场文书
高中同学会致辞
2015/08/01 职场文书
2016年清明节寄语
2015/12/04 职场文书
九年级化学教学反思
2016/02/22 职场文书
导游词之江南园林狮子林
2019/09/16 职场文书