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>