遍历ul下的li，点击弹出li的索引

<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
    <ul id='ul'>
        <li>点我啊</li>
        <li>点我啊</li>
        <li>点我啊</li>
        <li>点我啊</li>
        <li>点我啊</li>
    </ul>
</body>
<script>
    // 第一种
    var ul = document.getElementById('ul')
    ul.addEventListener('click',function(e) {
        var lis = ul.getElementsByTagName('li')
        for (let i = 0; i < lis.length; i++ ) {
            if (e.target == lis[i]) {
                alert(i+1)
            }
        }
    })

    // 第二种
    // var lis = document.getElementsByTagName('li')
    // for (var i = 0; i < lis.length; i++) {
    //     lis[i].onclick = function (i) {
    //         return function() {
    //             alert(i+1)
    //         }
    //     }(i)
    // }

    // 第三种
    // var lis = document.getElementsByTagName('li')
    // for (var i = 0; i < lis.length; i++) {
    //     (function (i) {
    //         lis[i].onclick = function () {
    //             alert(i+1)
    //         }
    //     })(i)
    // }

    // 第四种
    // var lis = document.getElementsByTagName('li')
    // for (let i = 0; i < lis.length; i++) {
    //     lis[i].onclick = function () {
    //         alert(i+1)
    //     }
    // }

    // 第五种
    // var lis = document.getElementsByTagName('li')
    // var liArr = [].slice.call(lis)
    // liArr.forEach((item,index) => {
    //     item.onclick = function() {
    //         alert(index+1)
    //     }
    // });

    // 第六种
    // var lis = document.getElementsByTagName('li')
    // function show(i) {
    //     this.onclick = function() {
    //         alert(i+1)
    //     }
    // }
    // for (var i = 0; i < lis.length; i++) {
    //     show.call(lis[i],i)
    // }

    // 第七种
    // var lis = document.getElementsByTagName('li')
    // for (let i = 0; i < lis.length; i++) {
    //     lis[i].index = i
    //     lis[i].onclick = function () {
    //         alert(this.index+1)
    //     }
    // }

    //第八种
    // var lis = document.getElementsByTagName('li')
    // for (let i = 0; i < lis.length; i++) {
    //     lis[i].setAttribute('data-index',i+1)
    //     lis[i].onclick = function (e) {
    //         alert(e.target.dataset.index)
    //     }
    // }

    // 第九种
    // var ul = document.getElementById('ul')
    // var lis = ul.getElementsByTagName('li')
    // lis = [].slice.call(lis)
    // ul.addEventListener('click',function(e) {
    //     alert(lis.indexOf(e.target)+1)
    // })
</script> 
</html>
遍历ul下的li，点击弹出li的索引

猜你喜欢
