js点击元素输出对应的index

<ul>
　　<li>Home</li>
　　<li>Skill</li>
　　<li>Interest</li>
</ul>

想要通过点击li输出对应的序列，jquery里面可以直接通过index()实现，而原生js实现则可以通过给li添加属性来实现。

首先，要添加onclick事件，由于获取到的li是数组，则需要用for循环来实现：

 for(var i = 0;i<li.length;i++){
    li[i].onclick = function(){
        console.log(i);
    }
} 

然而，这样输出的始终都是3. 原因是函数是在调用的时候才回去获取i 的值，此时i 的值为3.而我们想要的效果是将i 与li “绑定”起来

我们可以在for 循环内给li 添加一个属性，这个属性可以是任意值，这样，就实现了“绑定”的效果

for(var i = 0;i<li.length;i++){
     li[i].index = i;      
     li[i].onclick = function(){
         console.log(this.index);
     }
 }