<!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>
