点击一个ul的五个li元素，分别弹出他们的序号

最新推荐文章于 2021-11-23 20:47:35 发布

一又十七

最新推荐文章于 2021-11-23 20:47:35 发布

阅读量555

点赞数

本文链接：https://blog.csdn.net/weixin_45387568/article/details/101447929

版权

1.使用let(用let声明的变量，只在其所在的代码块内有效)

<ul>
    <li>000</li>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>
<script>
    var oli = document.querySelectorAll('li');
    console.log(oli);

    for (let i = 0; i < oli.length; i++) {
       oli[i].onclick=function(){
           console.log(i);
       }
    }
    </script>

2.利用闭包

<ul>
    <li>000</li>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>
<script>
    var oli = document.querySelectorAll('li');
    console.log(oli);
    for (var i = 0; i < oli.length; i++) {
        oli[i].onclick = (function (k) {
            return function(){
                console.log(k)
            }
        })(i);
    }
    </script>

3.为对象添加属性，属性的值即为自身的序号。

<ul>
    <li>000</li>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>
<script>
    var oli = document.querySelectorAll('li');
    console.log(oli);
    for (var i = 0; i < oli.length; i++) {
        oli[i].a = i;
        oli[i].onclick = function () {
            console.log(this.a);
        }
    }
    </script>