为什么这弹出的总是第6条记录


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>Untitled Page</title> 
</head> 
<body> 
<ul id="list"> 
<li>第1条记录</li> 
<li>第2条记录</li> 
<li>第3条记录</li> 
<li>第4条记录</li> 
<li>第5条记录</li> 
<li>第6条记录</li> 
</ul> 
<script type="text/javascript"> 
var list_obj = document.getElementById("list").getElementsByTagName("li"); //获取list下面的所有li的对象数组 
for (var i = 0; i <= list_obj.length; i++) { 
list_obj[i].onmousemove = function() { 
this.style.backgroundColor = "#cdcdcd"; 
} 
list_obj[i].onmouseout = function() { 
this.style.backgroundColor = "#FFFFFF"; 
} 
list_obj[i].onclick = function(i) { 
return function(){
alert("这是第" + (i+1)+ "记录"); 
}
}(i)
} 
</script> 
</body> 
</html>

解决方案 »

  1.   

    再贴一个解决方案 哎～ 就是不知道 怎么回事啊 ？
    希望大侠能解答小弟的问题<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <body> 
    <ul id="list"> 
    <li>第1条记录</li> 
    <li>第2条记录</li> 
    <li>第3条记录</li> 
    <li>第4条记录</li> 
    <li>第5条记录</li> 
    <li>第6条记录</li> 
    </ul>
    </body> 
    <script>
    var list_obj = document.getElementById("list").getElementsByTagName("li"); //获取list下面的所有li的对象数组 
    for (var i = 0; i <= list_obj.length; i++) {
    (function(){
    var p=i+1;
    list_obj[i].onclick = function(){
    alert("这是第" + p + "记录");
    }
    })()
    }
    </script> 
      

  2.   

    因为i是在function中
    所以要用闭包把i的作用域固定
      

  3.   

    这里面的i可以看做是全局变量
    for循环之后i的值一直是6
    所有On***中调用的都是全局的变量i
    自然都是6喽
      

  4.   

    把上面的例子 分解开来应该是这样的吧 如下：<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <body> 
    <ul id="list"> 
    <li>第1条记录</li> 
    <li>第2条记录</li> 
    <li>第3条记录</li> 
    <li>第4条记录</li> 
    <li>第5条记录</li> 
    <li>第6条记录</li> 
    </ul>
    </body> 
    <script>
    var a = document.getElementById("list").getElementsByTagName("li"); //获取list下面的所有li的对象数组 
    /*
    for (var i = 0; i <6; i++) {
    a[i].onclick = function(){
    alert("这是第" + i + "记录");
    }
    }
    alert(i)
    */
    a[0].onclick=function(){
    alert("这是第" + 0 + "记录");
    }
    a[1].onclick=function(){
    alert("这是第" + 1 + "记录");
    }
    a[2].onclick=function(){
    alert("这是第" + 2 + "记录");
    }
    a[3].onclick=function(){
    alert("这是第" + 3 + "记录");
    }
    a[4].onclick=function(){
    alert("这是第" + 4 + "记录");
    }
    a[5].onclick=function(){
    alert("这是第" + 5 + "记录");
    }
    </script> 
    如果for (var i = 0; i <6; i++) {
    a[i].onclick = function(){
    alert("这是第" + i + "记录");
    }
    }  我觉得第一个应该输出“这是第0记录” 啊 为什么没有
      

  5.   

    哦 上面的问题说错了 应该是
    难道for（）循环绑定和 分解开来绑定不一样吗？？？？
      

  6.   

    在网上找到了答案 分享下 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <body> 
    <ul id="list"> 
    <li>第1条记录</li> 
    <li>第2条记录</li> 
    <li>第3条记录</li> 
    <li>第4条记录</li> 
    <li>第5条记录</li> 
    <li>第6条记录</li> 
    </ul>
    </body> 
    <script>
    var a = document.getElementById("list").getElementsByTagName("li"); //获取list下面的所有li的对象数组 
    for (var i = 0; i <8; i++) {//当i>6时a[i].onclick出错 跳出 a最终为6
    a[i].onclick = function(){
    alert("这是第" + i + "记录");
    }
    }
    </script> 因为在a[i].onclick的事件处理程序——也就是那个匿名函数是在用户单击链接时才被调用的。而调用时，需要对变量i求值，解析程序首先会在事件处理程序(匿名函数)内部查找，但没有定义。然后，又到外部作用域中查找，此时有定义，但i的值是6（只有i大于6才会停止执行for循环）。因此，就会取得该值——。而且，这也是由于匿名函数本身无法传递参数（故而无法维护自己的作用域）造成的。