JS遍歷ul下的li點擊彈出li的索引的實現(xiàn)方法

更新時間：2016年09月19日 14:03:09 作者：胖子愛學習

這篇文章主要介紹了JS遍歷ul下的li點擊彈出li的索引的方法，非常不錯，具有參考借鑒價值，需要的朋友可以參考下

首先我們需要一個html結(jié)構(gòu)

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

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

接下來看看我們的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)
}

我們實現(xiàn)了?。?！

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

簡單說一下實現(xiàn)的過程吧

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

這是我整理立調(diào)函數(shù)或自執(zhí)行函數(shù)；

本質(zhì)上我們是利用閉包的原理實現(xiàn)彈出的索引，我們立調(diào)函數(shù)傳一個參數(shù)Index，也就是我們的索引i，在函數(shù)里面實現(xiàn)了閉包，

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

我們幾個簡單的例子

　　　　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的索引，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: