点击a标签弹出相应的序号

最新推荐文章于 2021-11-27 16:59:24 发布

QUAN-铨

最新推荐文章于 2021-11-27 16:59:24 发布

阅读量299

点赞数

分类专栏： js 文章标签： js jquery css html

本文链接：https://blog.csdn.net/abcquan123/article/details/108233186

版权

js 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

点击a标签弹出相应的序号

结合网上大家的方法总结了四种方法，欢迎补充

直接上代码，有注释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击a标签弹出相应的序号</title>
    <style>
        a{
            text-decoration: none;
            border: 1px solid #ccc;
        }
        .quan{
            width: 300px;
            text-align: center;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="quan">
        <a href="javascript:;">0</a>
        <a href="javascript:;">1</a>
        <a href="javascript:;">2</a>
        <a href="javascript:;">3</a>
        <a href="javascript:;">4</a>
        <a href="javascript:;">5</a>
        <a href="javascript:;">6</a>
        <a href="javascript:;">7</a>
        <a href="javascript:;">8</a>
        <a href="javascript:;">9</a>
    </div>
    <!-- 方法三 -->
    <!-- 引入jquery -->
    <script src="./js/jquery.min.js"></script>
    <script>
        // 获取元素
        let a=document.querySelectorAll('a')
        // 1、方法一
        // 使用let循环
        // for(let i=0;i<a.length;i++){
        //     a[i].addEventListener('click',function(){
        //         console.log(i)
        //     })
        // }
        // 2、方法二
        // 使用var 没有块级作用域，点击的时候都是输出10 用自定义属性，直接得到自定义属性的序号
        // for(var i=0;i<a.length;i++){
        //     a[i].setAttribute('index',i)//这里也可以不写，直接在html里面加
        //     a[i].addEventListener('click',function(){
        //         // console.log(i)//输出的都是10
        //         console.log(this.getAttribute('index'))
        //     })
        // }
        // 3、方法三
        // 用jquery
        // $(a).click(function(){
        //     console.log($(this).index())
        // })
        // 4、方法四
        // 使用闭包，闭包会浪费内存喔，能不使用还是尽量避免
        for(var i=0;i<a.length;i++){
            (function(j){//这是一个立即执行函数
                a[j].addEventListener('click',function(){
                    console.log(j)
                })
            })(i)//传递参数i，在上面用j接收
        }
    </script>
</body>
</html>

作为自己学习过程中的总结，有什么问题和错误欢迎指出

QUAN-铨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
点击a标签弹出相应的序号

点击a标签弹出相应的序号总结了三种方法，欢迎补充直接上代码，有注释<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>点击a标签弹出相应的序号</title>
复制链接

扫一扫

专栏目录