日期:2014-05-16  浏览次数:20479 次

这段代码为什么会显示alert(5);如何按原有意图显示alert(0)~alert(4);
代码如下,应该是闭包的缘故,但还是比较含混,希望有人帮我解释一下。

HTML code

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style type="text/css">
    p {background:gold;}
</style>
<script type="text/javascript"> 
function init() {    
    var pAry = document.getElementsByTagName("p");    
    for( var i=0; i<pAry.length; i++ ) {    
        pAry[i].onclick = function() {  
            alert(i);    
        } 
    }
}

</script> 
</head> 
<body onload="init();"> 
<p>p0</p> 
<p>p1</p> 
<p>p2</p> 
<p>p3</p> 
<p>p4</p> 
</body> 
</html> 



------解决方案--------------------
HTML code

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style type="text/css">
    p {background:gold;}
</style>
<script type="text/javascript"> 
function init() {    
    var pAry = document.getElementsByTagName("p");    
    for( var i=0; i<pAry.length; i++ ) {
        (function(i){
            pAry[i].onclick = function() {  
                alert(i);    
            }             
        })(i)

    }
}

</script> 
</head> 
<body onload="init();"> 
<p>p0</p> 
<p>p1</p> 
<p>p2</p> 
<p>p3</p> 
<p>p4</p> 
</body> 
</html>

------解决方案--------------------
楼主 就是 闭包的问题

(function(x){
  
})(i)

i是实参,x是形参。


搜下 js闭包 一大堆解释。