点击一列显示其index的三种方法

2023年4月8日 186次阅读 来源: hover_lew 
    <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>
    原文作者：hover_lew
    原文地址: https://segmentfault.com/a/1190000008466699
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞