Question

javascript for 循环的问题

我的想法是点击每一个li就显示相对应i，比如 点击第一个 就显示0点击第二个就显示1，但是无论怎么样 都显示的是5 我觉得我对for循环的理解不是很透彻。谁能帮我解答一下？
<script>
function list(){
var _li=document.getElementsByTagName("li");
for(i=0;i<_li.length;i++){
var _tmp=i;
_li[i].onclick=function(){
alert(i);
}
}

//alert("sad");
}
window.onload=function(){list()};
</script>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

Answer 1

你那种：

_li[i].onclick=function(){

alert(i);

}

相当于把右面的方法引用赋给onclick事件，所以只有真正点击的时候才去找变量i的值

而“寻_常”的那种：

_li[i].onclick=(function(i){

                    return function(){

            alert(i);

            }

        })(i);

右面是一个自调用函数，自调用函数格式

(匿名函数)();

因为这个匿名函数没有名字，也没有复制给变量，所以需要这样调用，然后这个匿名函数里面执行返回方法引用的语句，而且每次都去找了变量i的当前值，所以能得出正确的结果。

如果你理解了，可以这样写：

_li[i].onclick= new Function("alert(" + i + ")");

Answer 2

这个不是循环的问题，在刷新页面的时候，就开始执行for语句，为每个li元素绑定点击事件。但是onclick里面的alert会在点击事件发生之后才会执行的。所以，这个时候变量i的值是根据当前i的值来定的。你可以试一下，在循环外面加一句 i = 100。你就会发现现在报的就是100了

Answer 3

function list(){
    var lis = document.getElementsByTagName('li');
    for(i=0; i<lis.length; i++){
        lis[i].onclick = function(){
            for(j=0; j<lis.length; j++){
                if(lis[j] == this){
                    alert(j);
                    return;
                }
            }
        }
    }
}

追问

受累问一下 这个this 代表的是什么？？？可以用lis[i].替换吗

追答

this就是你单击的那个li，不能替换

Answer 4

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

追问

不知道算不算钻牛角尖 ，我见过有一种写发也是用的闭包。我想问问，问什么我写的那种不行，而闭包就可以？？？

追答

首先你要搞清楚为什么你的那种不行，我们来看一个例子

var arr = [];
for(var i = 0; i< 5;i++)
    arr.push(function(){return i});
alert(arr[0]())//5
简化后就是
var a =0;
function abc()
{
    return a;
}
a = 5;
abc();//5
能明白？当定义函数时，里面虽然有个i,但是没有执行。当函数执行的时候，i已经是5了，自然是返回5而不会返回其他的

追问

明白了 但是 问一下 为什么用闭包就能解决这个问题？？？

追答

不是因为闭包能解决这个问题,而是因为即时函数能解决这个问题,既然函数定义了没有执行,那么干脆就用一个(function(i){})(i)即时函数立即去执行它，并且把参数传递进去,那么里面接收到的i就是一个副本i了，也就不会随外面的i的变化而变化。

追问

大哥 别嫌我啰嗦啊 ，（我智商比较低），如果不采用(function(i){})(i)
，采用单纯的function(){}为什么不能执行？

追答

<button id = "btn">点我</button>
<script>
var i = 0;
btn.onclick = function(){alert(i)}//注意.这里只是事件绑定,并未执行
i = 5;
</script>

这个你觉得点按钮的时候应该弹0还是5？显然是5,因为i = 5这条语句已经执行完毕了, 此时i已经等于5了,但是你并未触发点击按钮的事件,当你点击按钮的时候,i是5,那么只会弹出5.