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

Posted YoungLight

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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);    
        }
      }

方法二:外层加一个立即调用的匿名函数;

 

以上是关于javascript循环不能正确输出i值的问题。的主要内容,如果未能解决你的问题,请参考以下文章

经典闭包

javascript while循环正确迭代但具有相同逻辑的for循环不是,在具有整数值和一些空值的数组上

for循环输出i为同一值的问题

浅谈js for循环输出i为同一值的问题

浅谈js for循环输出i为同一值的问题(闭包解决)

MATLAB中如何用for 循环将结果代入矩阵中?