判断点击第几个按钮JS代码的三种方法

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

a50270

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

阅读量1.3k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xinzaimengzai/p/9591846.html

版权

方法一：使用下标实现
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload = function () {
                var btns = document.getElementsByTagName("button");
                for (var i=0, length=btns.length; i<length; i++) {
                    var btn = btns[i];
                    //将btn所对应的下标保存在btn上
                    btn.index = i;
                    btn.onclick = function () {
                        alert('第'+(this.index+1)+'个');
                    };
                }
            }
        </script>
    </head>
    <body>
        <button>测试1</button>
        <button>测试2</button>
        <button>测试3</button>
    </body>
</html>

方法二：使用闭包实现（闭包的作用可以延长局部变量的生命周期）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload = function () {
                var btns = document.getElementsByTagName("button");
                //利用闭包实现循环遍历+监听
                for (var i=0, length=btns.length; i<length; i++) {
                    (function(i) {
                        var btn = btns[i];
                        btn.onclick = function () {
                            alert('第'+(i+1)+'个');
                        };
                    })(i)
                }
            }
        </script>
    </head>
    <body>
        <button>测试1</button>
        <button>测试2</button>
        <button>测试3</button>
    </body>
</html>

方法三：利用ES6实现（let有自己的块作用域）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload = function () {
                var btns = document.getElementsByTagName("button");
                //利用let定义i
                for (let i=0, length=btns.length; i<length; i++) {
                        var btn = btns[i];
                        btn.onclick = function () {
                            alert('第'+(i+1)+'个');
                        };
                }
            }
        </script>
    </head>
    <body>
        <button>测试1</button>
        <button>测试2</button>
        <button>测试3</button>
    </body>
</html>

转载于:https://www.cnblogs.com/xinzaimengzai/p/9591846.html

a50270

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
判断点击第几个按钮JS代码的三种方法

方法一：使用下标实现<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> ...
复制链接

扫一扫