點選一列顯示其index的三種方法

hover_lew發表於2019-02-16
Index
    <body>  
    <!--5.下面這個ul，如何點選每一列的時候alert其index？-->  
    <ul id="test">  
        <li>這是第一條</li>  
        <li>這是第二條</li>  
        <li>這是第三條</li>  
    </ul>  
    </body>  
    <script>  
        //第一種方式，加入index屬性  
        window.onload=function(){  
           * var otest=document.getElementById(`test`);  
            var oli=document.getElementById(`test`).getElementsByTagName(`li`);  
           * for(var i=0;i<oli.length;i++){  
                oli[i].setAttribute(`index`,i);  
                oli[i].onclick=function(){  
                  console.log(this.getAttribute(`index`));  
                }  
            }  
            }; 
        //方法二  
        var oli=document.getElementById(`test`).getElementsByTagName(`li`);  
      
            for(var i=0;i<oli.length;i++){  
                oli[i].index=i;  
                oli[i].addEventListener("click",function(e){  
                    console.log(e.target.innerText);  
                    console.log(e.target.index);  
                });  
            }
      
        //方法3，使用閉包的方式  
       var oli=document.getElementById(`test`).getElementsByTagName(`li`);  
        for(var i=0;i<oli.length;i++) {  
            oli[i].addEventListener("click", function (num) {  
                return function () {  
                    console.log(num);  
                }  
            }(i))  
        } 
      
    </script>

相關文章