javascript循环点击li问题

好吧，我是个渣渣

今天用原生js写li的循环点击，之前习惯了jquery，换成了javascript之后就不行了

先贴上html源代码

<ul id="carouselWrap">
    <li class="carousel-item carousel1">1</li>
    <li class="carousel-item carousel2">2</li>
    <li class="carousel-item carousel3">3</li>
    <li class="carousel-item carousel4">4</li>
 </ul>

接着是js代码

  <script>
        var ul = document.getElementById('ul');
        var li = ul.getElementsByTagName('li');

        for(var i=0;i<li.length;i++){
            li[i].onclick = function(){
                console.log(i);
            }
        }
    </script>

此时此刻问题来了！！！！

在页面上点击li的项，无论点什么，输出的都是“4”，

原因：

onsole.log(i)里的i在循环完成的时候被赋值成了5，而每个按钮的onclick都被赋值了同一个function,也就是说每个function里的i指的是同一个i，i=4，自然每个点击都会打印出4

解决办法：

利用闭包把每个function里的i都变成不同的i就行了，循环中的function自调用，将循环中的i作为参数传入function中，此时，function中的i已经不是循环中的i了（这里有点绕，其实形参i，即function里的i换成什么变量名都行），而是在内存中开辟了一个内存空间存储了作为参数传进来的i的值，这样function中的就不会随着循环中的i的值的改变而改变了,就可以打印出你要的结果了。

po上代码：

    <script>
        var ul = document.getElementById('ul');
        var li = ul.getElementsByTagName('li');

        for(var i=0;i<li.length;i++){
            (function(i){
                li[i].onclick = function(){
                    console.log(i);
                }
            })(i)
        }
    </script>