javascript循环不能正确输出i值的问题。
来源:互联网 发布:三维人像综合数据门 编辑:程序博客网 时间:2024/06/16 01:04
对于javascript的循环取值是每个开发者都遇到过的问题,例如,下面这个例子我们并不能得到想要的结果:
<body> <ul> <li>fas</li> <li>sf</li> <li>fas</li> <li>sf</li> <li>sf</li> </ul> <script type="text/javascript"> <!-- window.onload=function(){ var lis=document.getElementsByTagName('li'); var i,len=lis.length; for ( i=0;i<len ;i++ ) { //alert(i); // 依次为0,1,2,3,4 lis[i].onclick=function(){ alert(i); //5 } }</body>
我们是希望点击每一个li标签都显示它自己的索引值,但由于内部函数调用时外部的 i 时,i 已经循环完毕,值为5,所以不能正确输出,更详细的解释在于此时onclick函数时一个闭包函数,每次引用的时外部函数的最后一个变量。
关于解决放法,有很多中,在此介绍下我自己常用的吧:
方法一:将循环中的 i 值设置为事件对象的属性,在上面的例子中,事件对象就是lis[i];
window.onload=function(){ var lis=document.getElementsByTagName('li'); var i,len=lis.length; for ( i=0;i<len ;i++ ) { lis[i].index=i; lis[i].onclick=function(){ alert(this.index); } }
方法二:外层加一个立即调用的匿名函数;
window.onload=function(){ var lis=document.getElementsByTagName('li'); var i,len=lis.length; for ( i=0;i<len ;i++ ) { (function(e){ lis[i].onclick=function(){ alert(e); } })(i); }
此时每次调用onclick函数时,传入的参数时外层函数的e,也就时逐个传入的 i 值。
方法三:仍然选择使用匿名函数
for ( i=0;i<len ;i++ ) { lis[i].onclick=(function(arg){ return function(){ alert(arg); } })(i);}
原理同上,事件函数调用时调用的值arg是外层函数的arg,此值是逐个又i传入的!
方法四:Function方法
for ( i=0;i<len ;i++ ) { lis[i].onclick=new Function("alert(" + i + ");"); //每次都会出new一个新函数 }
方法五:ES6的let方法;
for( let i=0;i<len; i++ ) { lis[i].onclick = function() { alert(i); } }
低版本浏览器会报错。
好了,以上就是个人总结的取循环中i值的一些方法,希望能对大家有帮助!
本文参考博客:http://blog.csdn.net/u013084331/article/details/50716467;
阅读全文
0 0
- javascript循环不能正确输出i值的问题。
- javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
- js,在循环中添加事件,输出循环数 i 的值,i++与++i的问题
- javascript解决for循环中i取值的问题
- 浅谈js for循环输出i为同一值的问题
- JSTL <c:out value="${EL}">不能正确输出的问题
- python的for循环中不能修改循环变量i
- chm不能正确显示的问题
- 关于cocopads 不能正确安装的问题
- show databases不能正确显示的问题
- js for循环输出i为同一值得问题
- js for循环输出i为同一值得问题
- 下面代码不能正确输出hello的选项为
- JavaScript中for循环总是输出最大值问题的几种解决方式
- 循环中加定时器 i的问题
- 解决centos不能sudo -i的问题
- javascript中正确显示struts2标签输出的中文
- for in 循环的输出顺序问题
- 生成Token的工具类TokenProccessor
- openstack 对接 NFS 存储
- linux命令之创建符号连接-ln
- Day1
- C语言的变量-1
- javascript循环不能正确输出i值的问题。
- 【云星数据---Apache Flink实战系列(精品版)】:Apache Flink批处理API详解与编程实战024--DateSet实用API详解024
- Mac电脑安装及终端命令使用mysql
- flex布局
- Spring和SpringMVC父子容器关系
- txt版本的标签转换成PASCAL VOC2007 格式的XML标签
- chrome开发小技巧
- log4qt使用示例
- 1.找出数组元素item在给定数组arr中的位置