JavaScript 遍历 闭包问题
来源:互联网 发布:socket.io java 编辑:程序博客网 时间:2024/06/13 01:06
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <title>Document</title> <script type="text/javascript"> window.onload = function() { var a = document.getElementsByTagName('span'); for (var i = 0; i < a.length; i++) { (function(i) { a[i].onclick = function(e) { alert((i+1) + ":" + this.innerText); } })(i); } } </script> <!--<script type="text/javascript"> $(function() { $('span').click(function() { //alert($(this).text()); window.alert($(this).index()+1); }) }) </script>--> </head> <body> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> <span>7</span> </body></html>
扩展阅读
前几天工作中写前端js代码时,遇到了遍历元素给它添加单击事件。就是这个问题让我整整调了一个下午。最后还是下班回家,上网查资料才知道怎么解决的。 (PS:之前也在《jQuery基础教程》第四版中看过讲循环绑定处理程序的内容,当时估计也没怎么用心看,所以没记起来。)
大神要是知道这类情况,可以关掉窗口,写这些主要是给像我一样的小白看的。谢谢!
先贴上错误的例子让大家看看。(例子里面用到jQuery,请导入jQuery库)
复制代码 代码如下:
循环绑定处理程序
(function(){
for(var i=1;i<=4;i++){("#btn"+i).get(0).onclick=function(){
alert(i);
}
}
});
按钮1
按钮2
按钮3
按钮4
这段代码运行之后,点击按钮,弹出的alert中显示数据几呢,我之前一直认为按钮1到按钮4,对应的alert中的数字也是1到4。要是你也这样想,那就错了。
点击每个按钮,alert中都是显示数字4,没想到吧!
现在写几种解决方案,共大家参考 !
第一种、编写一个function,在这个function中返回一个函数
复制代码 代码如下:
(function(){
for(var i=1;i<=4;i++){(“#btn”+i).get(0).onclick=btnClick(i);
}
});
var btnClick=function(value){
return function(){
alert(value);
}
}
第二种、使用立即调用函数表达式
(function(value){
//代码块
})(i)//这就是立即调用函数表达式
复制代码 代码如下:
(function(){
for(var i=1;i<=4;i++){(“#btn”+i).get(0).onclick=(function(value){
return function(){
alert(value);
} })(i);
}
});
第三种、使用jQuery的each函数
复制代码 代码如下:
(function(){.each([1,2,3,4],function(index,value){
$("#btn"+value).get(0).onclick=function(){
alert(value);
}
});
});
使用上面三种情况,就可以避免一开始那个情况了。
其中get(0)指的是将jQuery对象转为DOM对象。
以上就是个人对JS闭包中的循环绑定处理程序的理解,分享给大家,希望能对小伙伴们有所帮助
- JavaScript 遍历 闭包问题
- javascript闭包问题
- Javascript闭包问题
- javascript闭包问题
- javascript 闭包问题
- JavaScript的闭包问题
- javascript的闭包问题
- javaScript 关于闭包问题
- JavaScript的闭包问题
- javascript中的闭包问题
- JavaScript的闭包问题
- javascript 闭包计数问题
- javascript中的闭包问题
- javascript 避免闭包引发的问题
- JavaScript闭包作用域变量问题
- JavaScript闭包产生的问题
- 如何理解Javascript中的闭包问题
- 如何理解JavaScript闭包问题
- 规则化和模型选择(Regularization and model selection)
- Android分包原理
- 解决Maven项目相互依赖/循环依赖/双向依赖的问题
- 遍历集合
- C++作业3
- JavaScript 遍历 闭包问题
- 截图工具deepin scrot的安装与使用
- Eclipse中使用SVN check out 项目
- jsp序号
- C#学习笔记-线程
- android安全之webview远程代码执行漏洞
- Java - Object类
- SIFT算法
- RecyclerView 的使用(2)の多Item布局