Javascript For循环赋值问题的疑惑

Question

HTML：  <ul id="focus_btn">
    <li class="">1</li>
    <li class="">2</li>
    <li class="">3</li>
    <li class="">4</li>
<li class="">5</li>
<li class="">6</li>
  </ul>JS：
function onBtn(){
var btnId = document.getElementById("focus_btn");
var btnLi = btnId.getElementsByTagName("li");

for(i=0;i<btnLi.length;i++){
btnLi.item(i).onmouseover = function(){ 
alert(i);
}
}
  鼠标移动到相应的LI后，始终弹出来的I值都是5。而不是每个LI对应的 0 1 2 3 4 5？  求解答！

Answer 1

function hoverAlert(){
var lis = document.getElementById("focus_btn").getElementsByTagName("li");
for(i=0;i<lis.length;i++){
lis[i].onmouseover=function(){
for(i=0;i<lis.length;i++){
if(this==lis[i]){
alert(i)
};
};
};
};
};
hoverAlert();

Answer 2

循环生成方法的时候、i的值一直在改变、！
而所有的onmouseover方法中alert(i)的时候、才去声明i的地址去取出i的值、所有的alert(i)方法中的变量i引用都是一个地址！所以、它的值始终是最后一次改变的值。
生成方法的时候并不是：
btnLi.item(i).onmouseover = function(){  
alert(0);
}
btnLi.item(i).onmouseover = function(){  
alert(1);
}
btnLi.item(i).onmouseover = function(){  
alert(2);
}
这样、而是alert(i)。如果你想不同的话btnLi.item(i).onmouseover = function() {
alert(this.innerText);          
}  可能我说的不正确、因为我也不是很懂！！！

Answer 3

因为你alert(i)，而i循环完成后，i==5了（相当于定义了一个i的全局变量）
所以你alert出来的就是5
你可以用闭包试试
for(i=0;i<btnLi.length;i++){
btnLi.item(i).onmouseover = function(){  
  delayAlert = function(){
    alert(i)
  }
  return delayAlert;
}
} 这样，alert的是闭包生成时传入的i值。

Answer 4

用个函数委托function onBtn(){
    var btnId = document.getElementById("focus_btn");
    var btnLi = btnId.getElementsByTagName("li");
    var tmpF=function(index){return function(){alert(index);}};
    
    for(i=0;i<btnLi.length;i++){
        btnLi.item(i).onmouseover = tmpF(i);
    }
}

Answer 5

for(i=0;i<btnLi.length;i++){
 btnLi.item(i).onmouseover = function(){  
alert(i);
 }
 }改为下面这样即可，因为执行事件响应函数时i的值已经是5，所以总是弹出5，必须“实时”传入参数才能达到0，1，2，3，4，5的效果。        for(i=0;i<btnLi.length;i++){
btnLi.item(i).onmouseover = function(t){
return function(){
alert(t);
};
}(i);
}