JavaScript一个经典问题

看下面代码

<ul id="demo">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<script>
        var ul=document.getElementById('demo');
        var oLi=ul.getElementsByTagName('li');
        for (var i = 0; i < oLi.length; i++) {
            oLi[i].onclick=function(){
                alert(i);
            }
        }
</script>

那么当我们点击第一个li就会弹出0，点击第二个就会弹出1……真的是这样吗？当我们去实践的时候就会发现，每次弹出的，都是5！！！
为什么会这样呢？
因为当代码执行到这里的时候，i已经变成5了，也就是说，我们还没来得及点击，i已经变成5了，这时候再点击弹出的当然只能是5。你说为什么是5，而不是4，i明明只会增长到4啊！这个我也不知道为什么，如果你知道麻烦告诉我。
那么解决办法是什么呢？

    var ul=document.getElementById('demo');
    var oLi=ul.getElementsByTagName('li');
    for (var i = 0; i < oLi.length; i++) {
        (function(n){
            oLi[n].onclick=function(){
            alert(n);
                }
            })(i);
        }
</script> ```
这里我们在for循环内部定义了一个立即执行函数，这样就可以顺利弹出每个li的索引了。
原创文章，转载请注明出处！