遍歷ul下的li，點擊彈出li的索引

首先我們需要一個html結構

　　<div >
        <ul>
            <li>a</li>
            <li>a</li>
            <li>a</li>
            <li>a</li>
            <li>a</li>
        </ul>
    </div>

我們遍歷ul 下所有的li 並添加點擊事件，一般我們會在for循環里面添加點擊事件，但是結果和我們所期盼不一樣，那么是為什么呢？？？？

接下來看看我們的js代碼

　　　var li = document.getElementsByTagName('li');
        for(var i = 0;i<li.length;i++){       
            (function(Index){
                li[i].addEventListener('click',function(e){
                    alert('I am link #'+ Index );
                },false);
            })(i)
       }

我們實現了！！！

這樣就是得來我們想要的效果點擊相應的li得來相應的索引。

簡單說一下實現的過程吧

(function () { /* code */ } ()); // 推薦使用這個
(function () { /* code */ })(); // 但是這個也是可以用的

這是我整理立調函數或自執行函數；

本質上我們是利用閉包的原理實現彈出的索引，我們立調函數傳一個參數Index，也就是我們的索引i，在函數里面實現了閉包，

Index會一直保留在作用域塊內，這樣我們再點擊的時候，會調用作用域名內保存的索引，從而實現我們需要的功能；

 

我們幾個簡單的例子

　　　　function num(){
            var i = 0;
            return function(){
                console.log(i++);
            }
        }
        var counter = num();
        console.log(counter()); // 0
　　　　 console.log(counter()); // ？？

 

     　var counter1 = (function(){
            var i = 0;
            
            return {
                get:function(){
                    return i;
                },
                set:function(val){
                    i = val;
                },
                increment:function(){
                    return ++i;
                }
            }
        }());
　　　　

　　　　console.log(counter1);
　　　　console.log(counter1.get()); // ？
　　　　console.log(counter1.set(3)); // ？
　　　　console.log(counter1.increment()); // ？
　　　　console.log(counter1.increment()); // ？

 

                console.log(counter1);
        console.log(counter1.get()); // 0
        console.log(counter1.set(3)); // 3
        console.log(counter1.increment()); // 4
        console.log(counter1.increment()); // 5