JS中的小问题

<html>
<head><title>最简树形菜单</title>
<style type="text/css">
.big{
    cursor:pointer;
}
ul{
    list-style-type:none;}
.mepig{
    display:none;
    }
</style><script>
window.onload=function()
{
   var vc=document.getElementsByName("medog");
   var ve=document.getElementsByTagName("ul");
    vc[0].onmouseup=function(){
//ve[1].style.display="block"
if(ve[1].style.display=="block")
     {
        ve[1].style.display="none";     }
     else
      {
      ve[1].style.display="block";
   }
} vc[1].onmouseup=function(){
if(ve[2].style.display=="block")
     {
        ve[2].style.display="none";     }
     else
      {
      ve[2].style.display="block";
   }
}
  /* for(var i=0;i<vc.length;i++)
   {
       vc[i].onmouseup=function()
    {        if(ve[i+1].style.display=="block")
     {
        ve[i+1].style.display="none";     }
     else
      {
      ve[i+1].style.display="block";
   }
       }
    }*/
 }
</script>
</head>
<body>
<ul>
<li ><img name="medog"  class="big" src="http://www.google.com/coop/images/zippy_plus_sm.gif" > A
    <ul name="mepig"  class="mepig">
    <li>a1</li>
    <li>a2</li>
    <li>a3</li>
    </ul>
</li>
<li><img name="medog" class="big" src='http://www.google.com/coop/images/zippy_plus_sm.gif' > B
    <ul name="mepig"  class="mepig">
    <li>b1</li>
    <li>b2</li>
    <li>b3</li>
    </ul>
</li>
</ul>
</body>
</html>
如上代码。为什么用注释掉的代码就会出错！难道注释的和没有注释的表达的不是一个意思吗？求大神解答！

解决方案 »

  1.   

    因为注释的代码里的function里的i+1的i由于for循环的执行导致最后改成了2，而不在是分别需要的0，1，这里涉及到闭包的知识。
      

  2.   

    这样改for(var i=0;i<vc.length;i++) {
           vc[i].onmouseup=function(j) {
    return function() {
    if(ve[j+1].style.display=="block") {
             ve[j+1].style.display="none";       }
          else {
    ve[j+1].style.display="block";
    }
    }
            
           }(i);
    }