• javascript循环不能正确输出i值的问题。


     对于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;

  • 相关阅读:
    用bower命令创建项目
    HBuilder打包ios应用
    响应式布局--引入外部样式
    手机中点击链接或button按钮出现黄色边框的解决办法
    通过输入卡号前10位数字判断是哪个银行的卡和类型(储蓄卡or信用卡)
    只允许输入数字和小数点
    python中的实例方法、静态方法、类方法、类变量和实例变量浅析
    python中的实例方法、静态方法、类方法、类变量和实例变量浅析
    python导入csv文件出现SyntaxError问题分析
    python导入csv文件出现SyntaxError问题分析
  • 原文地址:https://www.cnblogs.com/younylight/p/7744894.html
Copyright © 2020-2023  润新知