點擊ul列表中每個li,打印當前索引值

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) 

 };

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章