JS遍歷ul下的li點(diǎn)擊彈出li的索引的實(shí)現(xiàn)方法
首先我們需要一個(gè)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 并添加點(diǎn)擊事件，一般我們會(huì)在for循環(huán)里面添加點(diǎ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)
}
我們實(shí)現(xiàn)了?。?！
這樣就是得來我們想要的效果點(diǎn)擊相應(yīng)的li得來相應(yīng)的索引。
簡單說一下實(shí)現(xiàn)的過程吧
(function () { /* code */ } ()); // 推薦使用這個(gè)
(function () { /* code */ })(); // 但是這個(gè)也是可以用的
這是我整理立調(diào)函數(shù)或自執(zhí)行函數(shù)；
本質(zhì)上我們是利用閉包的原理實(shí)現(xiàn)彈出的索引，我們立調(diào)函數(shù)傳一個(gè)參數(shù)Index，也就是我們的索引i，在函數(shù)里面實(shí)現(xiàn)了閉包，
Index會(huì)一直保留在作用域塊內(nèi)，這樣我們再點(diǎn)擊的時(shí)候，會(huì)調(diào)用作用域名內(nèi)保存的索引，從而實(shí)現(xiàn)我們需要的功能；
我們幾個(gè)簡單的例子
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點(diǎn)擊彈出li的索引，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
- js 索引下標(biāo)之li集合綁定點(diǎn)擊事件
- JS數(shù)組操作(數(shù)組增加、刪除、翻轉(zhuǎn)、轉(zhuǎn)字符串、取索引、截取(切片)slice、剪接splice、數(shù)組合并)
- 用javascript為DropDownList控件下拉式選擇添加一個(gè)Item至定義索引位置
- JavaScript遍歷DOM元素的常見方式示例
- JavaScript實(shí)現(xiàn)的DOM樹遍歷方法詳解【二叉DOM樹、多叉DOM樹】
- JS遍歷DOM文檔樹的方法實(shí)例詳解
- javascript先序遍歷DOM樹的方法
- JavaScript簡單遍歷DOM對象所有屬性的實(shí)現(xiàn)方法
- JS實(shí)現(xiàn)點(diǎn)擊li標(biāo)簽彈出對應(yīng)的索引功能【案例】
相關(guān)文章
本文主要介紹了百度百科目錄導(dǎo)航樹小插件,具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
解決layui laydate 時(shí)間控件一閃而過的問題
今天小編就為大家分享一篇解決layui laydate 時(shí)間控件一閃而過的問題，具有好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
刪除屬性有很多方法,學(xué)到了就在這里記錄一下,下面這篇文章主要給大家介紹了關(guān)于js刪除對象屬性的多種方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
權(quán)限管理就是管理用戶對于資源的操作。本 CRM 系統(tǒng)的權(quán)限（也稱作資源）是基于角色操作權(quán)限來實(shí)現(xiàn)的，即RBAC（Role-Based Access Control，基于角色的訪問控制），就是用戶通過角色與權(quán)限進(jìn)行關(guān)聯(lián)2022-08-08
學(xué)習(xí)JavaScript設(shè)計(jì)模式(策略模式)
這篇文章主要帶領(lǐng)大家學(xué)習(xí)JavaScript設(shè)計(jì)模式，其中重點(diǎn)介紹策略模式，以年終獎(jiǎng)為實(shí)例對策略模式進(jìn)行分析，對策略模式進(jìn)行詳細(xì)剖析，感興趣的小伙伴們可以參考一下2015-11-11
JS實(shí)用的動(dòng)畫彈出層效果實(shí)例
這篇文章主要介紹了JS實(shí)用的動(dòng)畫彈出層效果,實(shí)例分析了javascript實(shí)現(xiàn)動(dòng)畫效果彈出層的方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05
Bootstrap進(jìn)度條學(xué)習(xí)使用
這篇文章主要為大家詳細(xì)介紹了Bootstrap進(jìn)度條的學(xué)習(xí)使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要介紹了微信小程序使用wxParse解析html的方法,結(jié)合實(shí)例形式詳細(xì)分析了wxParse的下載、導(dǎo)入及具體使用技巧,需要的朋友可以參考下2019-01-01
js操作css屬性實(shí)現(xiàn)div層展開關(guān)閉效果的方法
這篇文章主要介紹了js操作css屬性實(shí)現(xiàn)div層展開關(guān)閉效果的方法,涉及javaScript操作css樣式實(shí)現(xiàn)div彈出層的效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05
JavaScript和其他語言一樣,都擁有捕獲異常的機(jī)制,下面這篇文章主要給大家介紹了關(guān)于JS中異常拋出和處理的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11