小练习4:简单的闭包练习(按钮)

180 阅读1分钟
  • 此次练习为了巩固闭包知识,练习一个简单的闭包按钮,通过闭包返回点击的按钮值
  • 本次练习通过普通方法和闭包两种方法实现简单的按钮点击弹出逻辑
  • 普通方法js部分代码如下
    var oDiv = document.getElementById("div");
    var oBut = oDiv.getElementsByTagName("input");
        for(let i = 0; i < oBut.length; i++){
            oBut[i].onclick = function () {
                alert(i+1);
            }
        }

        for(var i = 0; i < oBut.length; i++){
            oBut[i].a = i;
            oBut[i].onclick = function () {
                alert(this.a + 1);
            }
        }
  • 三种闭包形式
        for(var i = 0; i < oBut.length; i++){ //2. 闭包
            (function (i) {
                oBut[i].onclick = function () {
                alert(i + 1);
            }
            })(i);
        }
    for(var i = 0; i < oBut.length; i++){
        oBut[i].onclick = function (i) {
            return function () {
                alert(i+1);
            }
        }(i);
    }
        for(var i = 0; i < oBut.length; i++) {
            changeTab(i);
        }
        function changeTab(i) {
            oBut[i].onclick = function () {
                alert(i+1);
            }
        }
  • 实现效果如图