js点击元素输出对应的index

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

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

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

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

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

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

1 for(var i = 0;i<li.length;i++){
2      li[i].index = i;      
3      li[i].onclick = function(){
4          console.log(this.index);
5      }
6  } 

 

posted on   liuhanSF  阅读(614)  评论(0编辑  收藏  举报
努力加载评论中...

点击右上角即可分享
微信分享提示