js 获取标签li的下标值

Question

这样的一种方式遍历，为什么一直是最后一个i值，前面的i值为什么没有进去onclick事件中；
我知道可以用参数传递进去可以实现，我现在不懂的是，为什么这种不行，是哪里出了问题～

Answer 1

这是典型问题了，不好理解。看一下我的示例代码：

(function () {
    var cl = console.log;
    
    //要求：用循环语句，创建5个函数，当调用这些函数时，第一个函数输出0，第二个输出1，以此类推
    
    //这样写可以吗？
    var funcs = [];
    for (var i = 0; i < 5; i++) {
        funcs[i] = function () {
            cl(i);//执行这条语句时，所使用的i的值已经是5了
        }
    }
    //此时i的值是5，看看：
    cl('i的值是：' + i);
    funcs.forEach(function (func) {
        func();
    });//5 5 5 5 5 不行
    
    //这样写就行了：
    funcs = [];
    for (var i = 0; i < 5; i++) {
        funcs[i] = (function (a) {
            return function () {
                cl(a);//由于内部函数使用到a，所以这个a的值会暂留在内存中
            }
        })(i);//外部函数在这里已经被执行，所以i的值会复制到a
    }
    funcs.forEach(function (func) {
        func();
    });//0 1 2 3 4

})();

Answer 2

闭包的问题。
可以传参数进去解决这个问题。

Answer 3

今天刚回答了一个类似的问题 你先看看吧啊
http://segmentfault.com/q/1010000004322692

Answer 4

你代码中每一个.onclick的匿名函数都绑定到同一个i变量，而不是i的值
当这些匿名函数被执行时才会真的使用i的值, 这时i的值固定为li.length

如果你想这些匿名函数使用不同的值，就需要把它们绑定到不同的变量。典型写法就是IIFE。

Answer 5

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
<script type="text/javascript">

 var ul = document.querySelectorAll('li');

 for (var i = ul.length - 1; i >= 0; i--) {

    (function(i){
        ul[i].onclick = function(){
            alert(i+1);
        }
    })(i)
     
 }


    
</script>

虽然let一下就可以解决,但是它本意考察闭包