Js实现点击同类型标签，输出第几个标签

最新推荐文章于 2023-02-17 14:23:01 发布

原创最新推荐文章于 2023-02-17 14:23:01 发布 · 823 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js

js 专栏收录该内容

6 篇文章

订阅专栏

本文探讨了在JavaScript中如何使用匿名函数自执行解决事件处理中的变量作用域问题，通过实例展示了点击不同元素时正确获取元素下标的方法，同时介绍了设置自定义属性作为替代方案。

匿名函数自执行

一般来说，我们写这样一段代码，因为事件异步，所以每次点击都打印n（lis的长度），因为你点击的时候，因为点击事件是异步的，所以他并不会影响 i 的自增，所以当点击的时候，i已经自增结束了。

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

而现在我们想要的效果是，点击第几个li就显示几，可以使用匿名函数自执行来实现，匿名函数自执行有很多种形式，给函数在外面加一个（），前面加符号+、~、！这三种也都可以，这里写一种，

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

此时你再点击每一个li就是显示li的下标，从0开始，从1开始，打印i+1即可。
这时是相当于n（lis的长度）次调用了匿名函数，每次i都是一个参数传入匿名函数中。

//匿名函数形式
    (function(){
        console.log(123);
    })(); 

    +function(){   
        console.log(123);
     }();

    ~function(){   
         console.log(123);
     }();

     !function(){    
         console.log(123);
     }();

添加自定义属性

当然也有很多别的方法，比如你可以给li设置属性，保存下它的下标值，然后每次点击输出他的下标值

        for(var i=0;i<lis.length;i++){    
            lis[i].index= i;
                lis[i].onclick = function(){   
                    console.log(this.index);                    
                };
        }