美文网首页
点击事件获取当前li的索引

点击事件获取当前li的索引

作者: Allan要做活神仙 | 来源:发表于2017-04-06 09:51 被阅读119次
html

思路:
先循环给每个li标签加个索引的属性,并赋值。

当点击的时候弹出当前li的索引属性

var aLi = document.getElementsByTagName('li');
for(var i=0; i<aLi.length;i++){
    aLi[i].index = i;
    aLi[i].onclick = function(){
            console.log( this.index);    // this指向当前被点击的li
    }
}

my favour:
思路2:
循环,立即执行函数,当点击当前li就把i传参直接打印。

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

相关文章

  • 点击事件获取当前li的索引

    思路:先循环给每个li标签加个索引的属性,并赋值。 当点击的时候弹出当前li的索引属性 my favour:思路2...

  • 【JavaScript】点击li输出当前索引

    说明:JavaScript实现一个点击当前li标签并输出当前li的索引的几种实现方式 一、用es6的let声明变量...

  • 闭包

    以上的代码,我们要实现的一个功能是,实现点击每个 li 标签时候弹出当前点击的那个 li 标签的索引,这里我们用的...

  • vue实现active点击切换

    循环的情况: 1、点击时传入index索引(获取当前点击的是哪个) 2、将索引值传入class(索引等于几就第几个...

  • 首页

    1. tab栏切换 实现方法:点击li获取当前li,对应的li添加active,在每个li里自定义一个data-t...

  • Vue实现active点击切换

    循环的情况: 1、点击时传入index索引(获取当前点击的是哪个) @click="active(index)" ...

  • 闭包保存正确状态

    下面是一段很正常的代码,获取元素循环元素,点击其中一个li的时候弹出相对应的索引,为什么点击每一个li都弹出(点击...

  • 循环绑定机制

    js循环给li绑定事件实现 点击li弹出其索引值 和内容 html代码 香蕉 苹果 菠萝 猕猴桃 芒果 方法一: ...

  • vue 点击事件获取当前点击元素

    点击子元素,触发父元素方法。获取子元素属性

  • target和currentTarget

    target直接获取当前元素为this,点击事件里可以不传参数 currentTarget获取当前元素的父元素为t...

网友评论

      本文标题:点击事件获取当前li的索引

      本文链接:https://www.haomeiwen.com/subject/xhvfattx.html