关于li标签循环绑定点击事件后输出i的问题

最新推荐文章于 2022-10-20 19:29:19 发布

「已注销」

最新推荐文章于 2022-10-20 19:29:19 发布

阅读量565

点赞数

本文链接：https://blog.csdn.net/qq_41588302/article/details/108638677

版权

代码：

<body>
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <script>
        var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            lis[i].onclick = function() {
                console.log(i);
            }
        }
    </script>
</body>

结果：
在这里插入图片描述
发现每次点击输出的都是4，原因是onclick是等着点击后才会执行的，而for循环是立即执行，所以当点击的时候，i已经是4了。
解决：
方法1：在for循环的同时给每个li标签绑定一个inde属性，让其等于i.点击事件中访问index
方法2：使用立即执行函数，将i作为参数传递给点击事件

    <script>
        var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            (function(i) {
                lis[i].onclick = function() {
                    console.log(i);
                }
            })(i);
        }
    </script>