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

最新推荐文章于 2022-06-08 10:46:02 发布

Arjen123123

最新推荐文章于 2022-06-08 10:46:02 发布

阅读量2.2k

点赞数

分类专栏： JavaScript 原生JS 事件文章标签：原生JS 事件事件下标获取 JavaScript

本文链接：https://blog.csdn.net/arjen123123/article/details/102845195

版权

JavaScript 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

原生JS

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)
    }