<!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實現）
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。