4種寫法實現點選ul列表中每個li列印索引

cynthiazha發表於2018-06-26
索引

1.html的基本結構:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

複製程式碼

2.js實現部分

  1.使用立即執行函式
   var liList = document.getElementsByTagName('li')

   for (var i = 0; i < liList.length; i++) { 

        (function(i){  

           liList[i].onclick = function(){ 

                   console.log(i)  

           } 

        })(i)  

   };

  2.使用ES6的let

   var liList = document.getElementsByTagName('li')

   for (let i = 0; i < liList.length; i++) {

          liList[i].onclick = function(){

                 console.log(i)

          }

   };

  3.forEach實現

   var liList = document.getElementsByTagName('li')

   var liArr = [].slice.call(liList)//將liList這個類陣列轉化成陣列，forEach只能遍歷陣列

  liArr.forEach(function(ele,i){  

              ele.onclick = function(){ console.log(i)  }  

    })

  4.call方法，這個是檢視forEach 的pollfill想出來的

var liList = document.getElementsByTagName('li')

 function fun(idx){ 

      this.onclick = function(){ console.log(idx) } 

 } 

 for (var i = 0; i < liList.length; i++) { 

        fun.call(liList[i],i) 

 };



相關文章