加载中...
  • 输出子目录下标的索引
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    <!DOCTYPE html>
    <html lang="zh">
    <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
    li{
    background: #808080;
    }
    </style>
    </head>
    <body>
    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    </ul>
    <script type="text/javascript">
    var li=document.getElementsByTagName("li");
    var ul = document.getElementsByTagName("ul");
    for (var i=0;i<li.length;i++) {
    // //第一种方法
    // li[i].index=i;//自定义索引
    // li[i].addEventListener("click",function(){
    // var index=this.index;
    // console.log(index);
    // },false)
    //
    // //第二种方法
    // li[i].addEventListener("click",function(a){
    // console.log(a.target);
    // },false)
    //
    // //第三种方法
    // (function(j){
    // li[j].onclick=function(){
    // console.log(j);
    // }
    // }(i))
    //
    //第四种方法
    // (function (j){
    // li[j].addEventListener("click",function(){
    // console.log(j);
    // })
    // }(i))
    }

    // 利用事件处理函数实现 事件委托
    ul[0].addEventListener("click",function(e){
    e.target.style.background='red';
    })

    </script>
    </body>
    </html>

    上一篇:
    选项卡效果
    下一篇:
    微信小程序前端获取openid
    本文目录
    本文目录