DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 實現點擊列表彈出列表索引的兩種方式
實現點擊列表彈出列表索引的兩種方式
編輯:關於JavaScript     
方式一,使用利用事件冒泡委托給列表的父節點去處理的方式
復制代碼 代碼如下:
var ulObj = document.getElementById("myUl");
ulObj.onclick = function (event) {
var tg = event.target;
var liArray = ulObj.getElementsByTagName("li");
for (var i = 0; i < liArray.length; i++) {
if (liArray[i] === tg) {
alert(i + 1);
}
}
}

方式二,使用閉包
復制代碼 代碼如下:
var liArray = document.getElementById("myUl").getElementsByTagName("li");
for (var i = 0; i < liArray.length; i++) {
(function () {
var n = i;
liArray[i].onclick = function () {
alert(n + 1);
}
})(i)
}

HTML代碼
復制代碼 代碼如下:
<ul id='myUl'>
<li>haha</li>
<li>heihei</li>
<li>hehe</li>
<li>gaga</li>
</ul>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved