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居然支持中文(unicode)编程!
Apr 12 Javascript
JavaScript splice()方法详解
Sep 22 Javascript
Javascript中的高阶函数介绍
Mar 15 Javascript
简单谈谈Vue 模板各类数据绑定
Sep 25 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
Oct 12 Javascript
ES6新特性五:Set与Map的数据结构实例分析
Apr 21 Javascript
JS使用tofixed与round处理数据四舍五入的区别
Oct 25 Javascript
vue+iview写个弹框的示例代码
Dec 05 Javascript
JS使用H5实现图片预览功能
Sep 30 Javascript
Python版实现微信公众号扫码登陆
May 28 Javascript
详解element-ui动态限定的日期范围选择器代码片段
Jul 03 Javascript
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
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教程之PHP中shell脚本的使用方法分享
2012/02/23 PHP
如何用PHP实现插入排序?
2013/04/10 PHP
php实现的简单检验登陆类
2015/06/18 PHP
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
Jquery实现的角色左右选择特效
2014/05/21 Javascript
jQuery表格排序组件-tablesorter使用示例
2014/05/26 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
JavaScript实现上下浮动的窗口效果代码
2015/10/12 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
2016/11/04 Javascript
javascript  删除select中的所有option的实例
2017/09/17 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
2018/08/07 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
vue项目打包后怎样优雅的解决跨域
2019/05/26 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
2019/11/04 jQuery
vue 父组件通过$refs获取子组件的值和方法详解
2019/11/07 Javascript
[01:59]游戏“zheng”当时试玩会
2019/08/21 DOTA
Python实现抓取百度搜索结果页的网站标题信息
2015/01/22 Python
Python简单日志处理类分享
2015/02/14 Python
解析Python编程中的包结构
2015/10/25 Python
python批量实现Word文件转换为PDF文件
2018/03/15 Python
浅谈pandas中Dataframe的查询方法([], loc, iloc, at, iat, ix)
2018/04/10 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
使用Python通过oBIX协议访问Niagara数据的示例
2020/12/04 Python
详解Django中的FBV和CBV对比分析
2021/03/01 Python
End Clothing美国站:英国男士潮牌商城
2018/04/20 全球购物
Python是如何进行类型转换的
2013/06/09 面试题
投标单位介绍信
2014/01/09 职场文书
酒吧创业计划书
2014/01/18 职场文书
电气自动化个人求职信范文
2014/02/03 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
先进个人材料怎么写
2014/12/30 职场文书
商场营业员岗位职责
2015/04/14 职场文书
开发一个封装iframe的vue组件
2021/03/29 Vue.js