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

最新推荐文章于 2022-04-13 18:20:15 发布

zoekitty

最新推荐文章于 2022-04-13 18:20:15 发布

阅读量2.5k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/zoekitty/article/details/52170195

版权

javascript 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

<body>
<!--5.下面这个ul，如何点击每一列的时候alert其index？-->
<ul id="test">
    <li>这是第一条</li>
    <li>这是第二条</li>
    <li>这是第三条</li>
</ul>
</body>
<script>
    //第一种方式，加入index属性
    /**window.οnlοad=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].οnclick=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>

zoekitty

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
点击一列显示其index的三种方法

这是第一条这是第二条这是第三条 //第一种方式，加入index属性 /**window.onload=function(){ * var otest=document.getElementById('test'); var oli=document.getElementById('test').getElementsByTag
复制链接

扫一扫

专栏目录