js---点击li输出当前li的索引号

最新推荐文章于 2022-06-16 13:41:45 发布

爱学习的小兰同学

最新推荐文章于 2022-06-16 13:41:45 发布

阅读量692

点赞数 1

分类专栏： # js

本文链接：https://blog.csdn.net/pilgrim_121/article/details/113796205

版权

js 专栏收录该内容

64 篇文章 1 订阅

订阅专栏

本文探讨了如何在JavaScript中动态为元素添加属性，通过示例展示了使用for循环为li元素添加自定义属性index，并实现点击事件监听。同时，解释了利用闭包解决循环中变量作用域问题，确保在点击事件中正确获取当前li元素的index值。这种方法对于理解和优化JavaScript代码的执行逻辑至关重要。

摘要由CSDN通过智能技术生成

1.动态添加属性的方法

<body>
    <ul>
        <li>星期1</li>
        <li>星期2</li>
        <li>星期3</li>
        <li>星期4</li>
        <li>星期5</li>
    </ul>
</body>

<script>
    var lis = document.querySelectorAll('li');
    for (var i = 0; i < lis.length; i++) {
        //添加自定义属性index
        lis[i].index = i;
        lis[i].onclick = function() {
            //console.log(i);//这种输出的i都是5
            console.log(this.index);//打印当前li的index
        }
    }
</script>

2.利用闭包的方式

// 立即执行函数也称为小闭包因为立即执行函数里面的任何一个函数都可以使用它的i这个变量
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
//利用for循环创建了5个立即执行函数
    (function(j) {
        lis[j].onclick = function() {
            console.log(j); //打印当前li的i
        }
    })(i);   
}
//这里改变了i的作用域（以前是全局变量，现在作为实参传递给变量j）
//在内存中开辟了一个内存空间存储了作为参数传进来的i的值