原生JS实现li点击弹出索引

两种方法原生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)
        }
    }
}

2. 第二种方法：利用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)
    }
}