点击li获取下标的几种方式（原生JS实现）
Posted 阿凡凡没有提
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了点击li获取下标的几种方式（原生JS实现）相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>点击li获取下标的几种方式</title> </head> <body> <h1>点击li获取下标的几种方式</h1> <ul> <li>红的</li> <li>蓝的</li> <li>紫的</li> <li>绿的</li> <li>白的</li> <li>黄的</li> <li>黑的</li> </ul> <script> var list = document.querySelectorAll(\'li\') // 第一种：for循环获取下标i // for (var i = 0; i < list.length; i++) { // list[i].index = i // 自定义属性发编号 // list[i].onclick = function () { // console.log(this.index) // } // } // 第二种：let的块级作用域属性获取到的是每个独立i // for (let i = 0; i < list.length; i++) { // list[i].onclick = function () { // console.log(i) // } // } // 第三种：伪数组转数组forEach遍历 // Array.from(list).forEach(function (li, index) { // li.onclick = function () { // console.log(index) // } // }) // 第四种：每个闭包都有一个自己的index for (var i = 0; i < list.length; i++) { // 立即执行函数把i作为实参，传递进去了，index接收，在内层函数里使用 // 每个事件都构成了一个闭包，每个闭包里都有一个自己的index list[i].onclick = (function (index) { return function () { console.log(index) } })(i) } </script> </body> </html>
以上是关于点击li获取下标的几种方式（原生JS实现）的主要内容，如果未能解决你的问题，请参考以下文章
原生js实现一个连连看小游戏-----------点击列表获取索引
JS如何给ul下的所有li绑定点击事件，点击使其弹出下标和内容