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

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

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"的序号,应该怎么办?


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

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

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

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

}


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

点击任何一个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秘密花园

【热门文章】
【热门文章】