为什么在onclick下获取不了i?是闭包问题吗?

我想让单击以后让第五个以后的li全部显示.
但这涉及到闭包问题吗?
我对闭包不了解.
谁帮忙写一下并加上注释,谢谢了
<!DOCTYPE HTML>
<html>
<head>
  <title> New Document </title><style type="text/css">
*{ margin:0; padding:0;}
body {font-size:12px;text-align:center;}
a { color:#04D; text-decoration:none;}
a:hover { color:#F50; text-decoration:underline;}
.SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}
.SubCategoryBox ul { list-style:none;}
.SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}
.showmore { clear:both; text-align:center;padding-top:10px;}
.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
.showmore a span { padding-left:15px; background:url(images/down.gif) no-repeat 0 0;}
.promoted a { color:#F50;}
</style> </head> <body>

<div class="SubCategoryBox">
<ul id="list">
<li ><a href="#">佳能</a><i>(30440) </i></li>
<li ><a href="#">索尼</a><i>(27220) </i></li>
<li ><a href="#">三星</a><i>(20808) </i></li>
<li ><a href="#">尼康</a><i>(17821) </i></li>
<li ><a href="#">松下</a><i>(12289) </i></li>
<li ><a href="#">卡西欧</a><i>(8242) </i></li>
<li ><a href="#">富士</a><i>(14894) </i></li>
<li ><a href="#">柯达</a><i>(9520) </i></li>
<li ><a href="#">宾得</a><i>(2195) </i></li>
<li ><a href="#">理光</a><i>(4114) </i></li>
<li ><a href="#">奥林巴斯</a><i>(12205) </i></li>
<li ><a href="#">明基</a><i>(1466) </i></li>
<li ><a href="#">爱国者</a><i>(3091) </i></li>
<li ><a href="#">其它品牌相机</a><i>(7275) </i></li>
</ul>
<div class="showmore" id="showmore">
<a href="more.html"><span>显示全部品牌</span></a>
</div>
</div>
<script type="text/javascript"> var $ = function(id){return document.getElementById(id)};
var ul = $("list");
var li = ul.getElementsByTagName("li");
var link = $("showmore").getElementsByTagName("a")[0];
for(var i=0; i<li.length; i++){
if(i > 5){
li[i].style.display = "none";
}
if(i == li.length-1){
li[i].style.display = "block";
}
link.onclick = function(){
                                if(i>5){
li[i].style.display = "block";
                                }

return false;
}
}
</script>
</body>
</html>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

link.onclick = (function(i){
                  return function(){
                       if(i>5){
                       li[i].style.display = "block";
                  }
                }
                )(i)闭包
<!DOCTYPE HTML>
<html>
<head>
  <title> New Document </title><style type="text/css">
*{ margin:0; padding:0;}
body {font-size:12px;text-align:center;}
a { color:#04D; text-decoration:none;}
a:hover { color:#F50; text-decoration:underline;}
.SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}
.SubCategoryBox ul { list-style:none;}
.SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}
.showmore { clear:both; text-align:center;padding-top:10px;}
.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
.showmore a span { padding-left:15px; background:url(images/down.gif) no-repeat 0 0;}
.promoted a { color:#F50;}
</style> </head> <body>

<div class="SubCategoryBox">
    <ul id="list">
        <li ><a href="#">佳能</a><i>(30440) </i></li>
        <li ><a href="#">索尼</a><i>(27220) </i></li>
        <li ><a href="#">三星</a><i>(20808) </i></li>
        <li ><a href="#">尼康</a><i>(17821) </i></li>
        <li ><a href="#">松下</a><i>(12289) </i></li>
        <li ><a href="#">卡西欧</a><i>(8242) </i></li>
        <li ><a href="#">富士</a><i>(14894) </i></li>
        <li ><a href="#">柯达</a><i>(9520) </i></li>
        <li ><a href="#">宾得</a><i>(2195) </i></li>
        <li ><a href="#">理光</a><i>(4114) </i></li>
        <li ><a href="#">奥林巴斯</a><i>(12205) </i></li>
        <li ><a href="#">明基</a><i>(1466) </i></li>
        <li ><a href="#">爱国者</a><i>(3091) </i></li>
        <li ><a href="#">其它品牌相机</a><i>(7275) </i></li>
    </ul>
    <div class="showmore" id="showmore">
        <a href="#"><span>显示全部品牌</span></a>
    </div>
</div>
<script type="text/javascript">
        var $ = function(id){return document.getElementById(id)};
        var ul = $("list");
        var li = ul.getElementsByTagName("li");
        var link = $("showmore").getElementsByTagName("a")[0];
        for(var i=0; i<li.length; i++){
            if(i > 5){
                li[i].style.display = "none";
            }
            if(i == li.length-1){
                li[i].style.display = "block";
            }
        }
        link.onclick = function(){
            for(var i=6; i<li.length;i++)
                li[i].style.display = "block";
            return false;
        }</script>
简单陈述一下,看下面例子var els = document.getElementsByName("text");for (var i = 0, j = els.length; i < j; i++){
    els.onclick = function(){
        alert(i);
    }
}这样做，每次alert出来的都只是i最后的值，这是因为js并没有java那种"块状作用域"
块状作用域简单举例就是，如
java:
for(int i = 0; i < 10; i++){

}
System.out.plant(i);//在这里面是访问不到i的而在js里面
for(var i = 0; i < 10; i++){
    //scope
}
alert(i);//这里访问到得是i最后的值，这是因为这个例子与以下例子是等价的var i = 0
for(; i < 10; i++){

}
alert(i);在for循环声明i与在外面声明都是一样的，因此当我们触发onclick事件的时候，获取到得值是循环完毕后的i
继续补充：
所以我们要
for (var i = 0, j = els.length; i < j; i++){
  els.onclick = function(i){
        return function(){
            alert(i)
        }
  }(i)
}里面alert(i),访问到的是当前作用域的i,而不是for(){}作用域中的i
居然把onclick放在一个循环里面。。改动比较大，自己看注释慢慢琢磨吧。。<!DOCTYPE HTML>
<html>
<head>
  <title> New Document </title><style type="text/css">
*{ margin:0; padding:0;}
body {font-size:12px;text-align:center;}
a { color:#04D; text-decoration:none;}
a:hover { color:#F50; text-decoration:underline;}
.SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}
.SubCategoryBox ul { list-style:none;}
.SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}
.showmore { clear:both; text-align:center;padding-top:10px;}
.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
.showmore a span { padding-left:15px; background:url(images/down.gif) no-repeat 0 0;}
.promoted a { color:#F50;}
</style> </head> <body>

<div class="SubCategoryBox">
    <ul id="list">
        <li ><a href="#">佳能</a><i>(30440) </i></li>
        <li ><a href="#">索尼</a><i>(27220) </i></li>
        <li ><a href="#">三星</a><i>(20808) </i></li>
        <li ><a href="#">尼康</a><i>(17821) </i></li>
        <li ><a href="#">松下</a><i>(12289) </i></li>
        <li ><a href="#">卡西欧</a><i>(8242) </i></li>
        <li ><a href="#">富士</a><i>(14894) </i></li>
        <li ><a href="#">柯达</a><i>(9520) </i></li>
        <li ><a href="#">宾得</a><i>(2195) </i></li>
        <li ><a href="#">理光</a><i>(4114) </i></li>
        <li ><a href="#">奥林巴斯</a><i>(12205) </i></li>
        <li ><a href="#">明基</a><i>(1466) </i></li>
        <li ><a href="#">爱国者</a><i>(3091) </i></li>
        <li ><a href="#">其它品牌相机</a><i>(7275) </i></li>
    </ul>
    <div class="showmore" id="showmore">
        <a href="more.html"><span>显示全部品牌</span></a>
    </div>
</div>
<script type="text/javascript">
        var $ = function(id){return document.getElementById(id)};
        var ul = $("list");
        var link = $("showmore").getElementsByTagName("a")[0];
        var state = false; //设置一个是否隐藏的状态标志
        hide(ul); //页面加载时隐藏部分品牌
        link.onclick = function(){
         var span = this.getElementsByTagName('span')[0];
         if(state){ //点击a时，如果有隐藏部分品牌，刚显示全部，并更改a的文本内容为"隐藏部分品牌"
         hide(ul);
         var txt = "显示全部品牌";
         if(span.textContent){
         span.textContent = txt;
         }else{
         span.innerText = txt;
         }
         state = false;
         }else{ //点击a时，如果是显示全部品牌，刚隐藏部分品牌，并更改a的文本内容为"显示部分品牌"
         show(ul);
         var txt = "隐藏部分品牌";
         if(span.textContent){
         span.textContent = txt;
         }else{
         span.innerText = txt;
         }
         state = true;
         }
            return false;
        }
        function hide(elem){ //定义隐藏从第五个li到倒数第二个li的方法
         var li = elem.getElementsByTagName("li");
        for(var i=0; i<li.length; i++){
            if(i > 5){
                li[i].style.display = "none";
            }
            if(i == li.length-1){
                li[i].style.display = "block";
            }
        }
        }
        function show(elem){ //定义一个显示全部li的方法
         var li = elem.getElementsByTagName("li");
         for(var i = 0; i< li.length; i++){
         li[i].style.display = 'block';
         }
        }
</script>
</body>
</html>
再来解释下你的疑问，你的代码并非取不到i，当然也不是什么闭包问题，不过当你点击按钮的时候，循环早就跑完了，所以此时的i永远是li的个数，即14，你可以试试下面的代码，只是在你原来的基础上加一个alert(i);<!DOCTYPE HTML>
<html>
<head>
  <title> New Document </title><style type="text/css">
*{ margin:0; padding:0;}
body {font-size:12px;text-align:center;}
a { color:#04D; text-decoration:none;}
a:hover { color:#F50; text-decoration:underline;}
.SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}
.SubCategoryBox ul { list-style:none;}
.SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}
.showmore { clear:both; text-align:center;padding-top:10px;}
.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
.showmore a span { padding-left:15px; background:url(images/down.gif) no-repeat 0 0;}
.promoted a { color:#F50;}
</style> </head> <body>

<div class="SubCategoryBox">
    <ul id="list">
        <li ><a href="#">佳能</a><i>(30440) </i></li>
        <li ><a href="#">索尼</a><i>(27220) </i></li>
        <li ><a href="#">三星</a><i>(20808) </i></li>
        <li ><a href="#">尼康</a><i>(17821) </i></li>
        <li ><a href="#">松下</a><i>(12289) </i></li>
        <li ><a href="#">卡西欧</a><i>(8242) </i></li>
        <li ><a href="#">富士</a><i>(14894) </i></li>
        <li ><a href="#">柯达</a><i>(9520) </i></li>
        <li ><a href="#">宾得</a><i>(2195) </i></li>
        <li ><a href="#">理光</a><i>(4114) </i></li>
        <li ><a href="#">奥林巴斯</a><i>(12205) </i></li>
        <li ><a href="#">明基</a><i>(1466) </i></li>
        <li ><a href="#">爱国者</a><i>(3091) </i></li>
        <li ><a href="#">其它品牌相机</a><i>(7275) </i></li>
    </ul>
    <div class="showmore" id="showmore">
        <a href="more.html"><span>显示全部品牌</span></a>
    </div>
</div>
<script type="text/javascript">        var $ = function(id){return document.getElementById(id)};
        var ul = $("list");
        var li = ul.getElementsByTagName("li");
        var link = $("showmore").getElementsByTagName("a")[0];
        for(var i=0; i<li.length; i++){
            if(i > 5){
                li[i].style.display = "none";
            }
            if(i == li.length-1){
                li[i].style.display = "block";
            }
            link.onclick = function(){
             alert(i);
                if(i>5){
                 li[i].style.display = "block";
                }
                return false;
            }
        }
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
  <title> New Document </title><style type="text/css">
*{ margin:0; padding:0;}
body {font-size:12px;text-align:center;}
a { color:#04D; text-decoration:none;}
a:hover { color:#F50; text-decoration:underline;}
.SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}
.SubCategoryBox ul { list-style:none;}
.SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}
.showmore { clear:both; text-align:center;padding-top:10px;}
.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
.showmore a span { padding-left:15px; background:url(images/down.gif) no-repeat 0 0;}
.promoted a { color:#F50;}
</style> </head> <body>

<div class="SubCategoryBox">
    <ul id="list">
        <li ><a href="#">佳能</a><i>(30440) </i></li>
        <li ><a href="#">索尼</a><i>(27220) </i></li>
        <li ><a href="#">三星</a><i>(20808) </i></li>
        <li ><a href="#">尼康</a><i>(17821) </i></li>
        <li ><a href="#">松下</a><i>(12289) </i></li>
        <li ><a href="#">卡西欧</a><i>(8242) </i></li>
        <li ><a href="#">富士</a><i>(14894) </i></li>
        <li ><a href="#">柯达</a><i>(9520) </i></li>
        <li ><a href="#">宾得</a><i>(2195) </i></li>
        <li ><a href="#">理光</a><i>(4114) </i></li>
        <li ><a href="#">奥林巴斯</a><i>(12205) </i></li>
        <li ><a href="#">明基</a><i>(1466) </i></li>
        <li ><a href="#">爱国者</a><i>(3091) </i></li>
        <li ><a href="#">其它品牌相机</a><i>(7275) </i></li>
    </ul>
    <div class="showmore" id="showmore">
        <a href="#"><span>显示全部品牌</span></a>
    </div>
</div>
<script type="text/javascript">        var $ = function(id){return document.getElementById(id)};
        var ul = $("list");
        var li = ul.getElementsByTagName("li");
        var link = $("showmore").getElementsByTagName("a")[0];
        for(var i=0; i<li.length; i++){
            if(i > 5){
                li[i].style.display = "none";
            }
            if(i == li.length-1){
                li[i].style.display = "block";
            }        }        link.onclick= (function(){
this.li1 = li;
return function(){
      for(var i=5;i<li1.length;i++){
        li[i].style.display = "block";
     }
                }
        })(li);
</script>
</body>
</html>
楼上的各位已经说的很明白了，楼主的问题根本就不是什么闭包的问题，li是全局变量，根本就没有必要用闭包的方法保存起来