点击li获取对应事件下标的四种方法

1 篇文章 0 订阅
1 篇文章 0 订阅

点击li获取对应事件下标的四种方法

在原生JS中,对于多个li的事件下标,是无法通过循环来直接获取,因为点击一次是一次事件,但是循环的执行会在一次事件中就完毕。第二次事件执行时循环已经结束。无法直接获取下标。

但是我们可以通过以下四种方案来解决这一问题:

例子如下:

<body>
  <h1>国庆放假安排</h1>
  <ul>
    <li>1号:写代码</li>
    <li>2号:写代码</li>
    <li>3号:写代码</li>
    <li>4号:写代码</li>
    <li>5号:写代码</li>
    <li>6号:写代码</li>
    <li>7号:写代码</li>
  </ul>
  <script>
    var list = document.querySelectorAll('li')
.......//四种解决方案
 </script>
</body>

1、我们可以通过自定义编号,每次点击给被点击li绑定一个编号[i].index。

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

2、我们可以通过ES6新增的let声明方式,让声明的i每循环一次都能成为一个独立的块,这样每次点击的循环事件都互不影响。

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

3、将li对象通过Array.from()方法转化成数组,在通过forEach()去遍历里面的每一项这样每次点击都可以找到每一项对应的下标index。

 Array.from(list).forEach(function (li, index) {
       li.onclick = function () {
         console.log(index)
       }
     })

4、把每个点击事件都变成一个立即执行函数,让立即执行函数把i作为实参,传递进去,index接收,在内层函数里使用,这样每个事件都构成了一个闭包,每个闭包里都有一个自己的index。

    for (var i = 0; i < list.length; i++) {
      list[i].onclick = (function (index) {
        return function () {
          console.log(index)
        }
      })(i)
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值