两种方法原生JS实现li点击弹出索引

  1. 第一种方法:直接将索引i寄存在对象中,代码如下:

Html结构:

<ul id="test">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

JS:

window.onload = function () {
var oUl = document.getElementById('test'),
oLi = oUl.getElementsByTagName('li');
for (var i = 0,len = oLi.length; i < len; i++) {
oLi[i].idx = i;
oLi[i].onclick = function () {
alert(this.idx)
}
}
}

  1. 第二种方法:利用JS闭包实现,代码如下:

Html结构:

<ul id="test">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

JS:

window.onload = function () {
var oUl = document.getElementById('test'),
oLi = oUl.getElementsByTagName('li');
for (var i = 0,len = oLi.length; i < len; i++) {
(function (n) {
oLi[i].onclick = function () {
alert(n)
}
})(i)
}
}