首先我們需要一個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
以上所述是小編給大家介紹的JS遍歷ul下的li點擊彈出li的索引，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對網站的支持！