关于闭包的问题

Question

        var blockLength=0;
        $("#divadd"+blockLength).click(function(){
            if(blockLength < 5){
                $(".muiltiRouteClass"+blockLength).attr("style","");
                $("#divminus"+blockLength).show();
                if(blockLength == 5){$("#divadd"+blockLength).css("visibility","hidden");}
            if(blockLength == 2){$("#divminus"+blockLength).css("display","none");}
            }
            blockLength++;
        });

如上面代码，最开始的按钮id是divadd2， 点击之后，将隐藏的divadd3显示出来。这时候blockLength++ 按钮的id是divadd3，请问点击之后，怎么重新给点击的按钮赋新的id。在线等，谢谢

Answer 1

就你的问题来说，应该是通过一个循环来为每个 route 绑定事件

for (var i = 0; i < 5; i++) {
    // 使用 IIFE 是处理循环变量在闭包中的问题
    (function(blockLength) {
        $(".muiltiRouteClass" + blockLength).attr("style", "");
        $("#divminus" + blockLength).show();
        if (blockLength == 5) { $("#divadd" + blockLength).css("visibility", "hidden"); }
        if (blockLength == 2) { $("#divminus" + blockLength).css("display", "none"); }
    })(i);
}

一般我会按下面的思路来处理

// 假设 muiltiRouteClass# 都有一个共同的 class 叫 multiRoutteClass
// 顺便：muilti 拼写错误，应该是 multi

// 先找出来，统计赋予一个 index，ID 也可以在这个时候生成
$(".multiRouteClass").forEach(function(index) {
    $(this)
        .data("index", index)
        .prop("id", "multiRoute" + index);
});

// 这样做会为每一个 multiRouteClass 注册 click 事件处理函数
// 如果它们有共用的父 DOM，可以在父 DOM 上注册事件代理
$(".multiRouteClass").on("click", function() {
    var $route = $(this);
    var index = $route.data("index");
    $route.attr("style", "");
    $("#divminus" + index).show();
    if (index == 5) { .... }
    if (index == 2) { .... }
});

如果使用事件代理的话，假设父 DOM 是 #parent

$("#parent").on("click", ".multiRouteClass", function() {
    ...
});

Answer 2

var blockLength=0;
(function() {

$("#divadd"+blockLength).click(function(){
        if(blockLength < 5){
            $(".muiltiRouteClass"+blockLength).attr("style","");
            $("#divminus"+blockLength).show();
            if(blockLength == 5){$("#divadd"+blockLength).css("visibility","hidden");}
        if(blockLength == 2){$("#divminus"+blockLength).css("display","none");}
        }
        blockLength++;
    });

}())

Answer 3

不要在每个divadd上监听点击事件，在他们共同的父元素上监听，然后根据e.target判断是哪个divadd被点击了，做相应操作。

Answer 4

var blockLength = 0;
$("#divadd" + blockLength).click(function () {
    (function (blockLength) {
        if (blockLength < 5) {
            $(".muiltiRouteClass" + blockLength).attr("style", "");
            $("#divminus" + blockLength).show();
            if (blockLength == 5) { $("#divadd" + blockLength).css("visibility", "hidden"); }
            if (blockLength == 2) { $("#divminus" + blockLength).css("display", "none"); }
        }
        blockLength++;
    })(blockLength);
});