JavaScript 遍历 闭包问题
2016-04-11 14:07
726 查看
<!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闭包中的循环绑定处理程序的理解,分享给大家,希望能对小伙伴们有所帮助
相关文章推荐
- 【js】:JS获得标签名的方法
- JavaScript 与Document
- JSP要点和JSP转发原理剖析
- 获取当前页面的完整URL
- js-DOM、BOM相关方法及属性的应用
- JavaScript“并非”一切皆对象
- Javascript的this用法
- Javascript闭包
- Javascript模块化编程
- Javascript 面向对象编程
- jsp中读取properties文件
- js中void(0)
- jfinal取消默认跳转到view.jsp页面的方法
- 【项目积累】对JSON数据的处理
- JScrollPane自动乡下滚动
- 使用 t-SNE算法和JavaScript语言可视化Visualizing Top Tweeps with t-SNE, in Javascript
- 【javascript 对日期的扩展 Format\addDays】
- js知识学习1
- 通过一道笔试题浅谈javascript中的promise对象
- knockout.js