javascript - 用for 语句遍历 li ,点击 li 当按钮用不能输出当前 li 的序号。

Question

window.onload = function (){
var ULa = document.getElementById("ULa");
var lia = ULa.getElementsByTagName("li");
for(var i=0;i<lia.length;i++){

    lia[i].onclick = function(){ 
      alert(i);
    };
   };

}

假设我有4个"li", 我点任何一个"li" 都获得4。为什么不是点第一个"li" 就输出 1 呢？
请教，如果我想我点任何一个"li"都输出当时的"li"的序号，应该怎么办？

Answer 1

学习闭包的时候，老师必讲的一个案例...

点击任何一个li都获得4就是因为js中的闭包。

解决方式：

1.使用匿名包装器（自执行匿名函数）

    for(var i=0;i<lia.length;i++){
        (function (e) {
            lia[e].onclick = function(){ 
                alert(e + 1);//i从0开始，加1才能获得1,2,3,4
            }
        })(i);
    };

2.从匿名包装器中返回一个函数

    for(var i=0;i<lia.length;i++){
        lia[i].onclick = (function(e){ 
            return function(){
                alert(e + 1);
            };
        })(i);
    };

参考：JavaScript秘密花园

Answer 2

这是闭包吧。
for(var i = 0,len = lia.length;i < len; i++){

lia[i].onclick = function(i){
    return function(){
        alert(i);
    }
}(i);

}

Answer 3

for(var i=0;i<lia.length;i++){
function (i) {
    lia[i].onclick = function(){ 
      alert(i);
    }
}(i)
};

Answer 4

$('#ULa li').on('click',function(){
    alert($(this).attr('id'));
})