zoukankan      html  css  js  c++  java
  • 判断点击第几个按钮JS代码的三种方法

    方法一:使用下标实现
    <!
    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>
    
    
    
     
  • 相关阅读:
    Spring ContextLoaderListener
    判断整数是否是对称数
    jstl缺包时的报错
    Spring初始化日志
    C# 网络编程之最简单浏览器实现
    Java实现 蓝桥杯 算法训练 Anagrams问题
    Java实现 蓝桥杯 算法训练 出现次数最多的整数
    Java实现 蓝桥杯 算法训练 出现次数最多的整数
    Java实现 蓝桥杯 算法训练 字串统计
    Java实现 蓝桥杯 算法训练 字串统计
  • 原文地址:https://www.cnblogs.com/xinzaimengzai/p/9591846.html
Copyright © 2011-2022 走看看