循环调用是事件绑定中遇到的一些问题-优快云博客

本文通过一个JavaScript实例展示了如何正确使用闭包来保留每次循环中的变量值。原本的代码示例中，由于闭包的作用域问题，所有的点击事件最终都触发了同一个函数并返回相同的值。通过对代码进行调整，将循环中的变量保存到每个元素的属性中，成功实现了每次点击都能返回对应链接的正确序号。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" >
                window.onload = function(){  
         var aLi = document.getElementsByTagName("a");  
         for(var i = 0; i < aLi.length; i++)   //for循环后，i=3，判断i<aLi.length,退出循环，此时i的值为3
         {  
             aLi[i].onclick = function()   
             {  
                    alert(i);   //3    //此时的i,是for循环完成之后的i值
             }     
          }  
    };
    </script>
</head>
<body>
<div class="wrap">  
        <a href="javascript:;" class="link">第一个链接</a>  
        <a href="javascript:;" class="link">第二个链接</a>  
        <a href="javascript:;" class="link">第三个链接</a>  
</div> 

</body>
</html>

如果我们想要得到每次循环中的i值，则要在函数内做一下改动。

window.onload = function(){  
         var aLi = document.getElementsByTagName("a");  
         for(var i = 0; i < aLi.length; i++)   //for循环后，i=3，判断i<aLi.length,退出循环，此时i的值为3
         {  
　　　　　　　 aLi[i].count = i;  //把for循环中的i保存到count中。
             aLi[i].onclick = function()   
             {  
                    alert(this.count);   //调用自身的count值。
             }     
          }  
    };

转载于:https://www.cnblogs.com/MY0101/p/5425006.html