Question

我有两个链接，一个是id #calendar_arrival_open，另一个是#calendar_departure_open。两个链接都控制是否显示包含日历的div，但在这两种情况下，显示的日历都是相同的日历，以避免加载两个相同的日历。我正在尝试使用以下代码在单击链接时切换日历的打开和关闭。

var state = "closed";
if(state == "closed"){
    $("#calendar_arrival_open").click(function () {
        $("#calendar_box").show();
        $("#select_arrival_date").show();
        $("#select_departure_date").hide();
        state = "arrival_open";
    });
    $("#calendar_departure_open").click(function () {
        $("#calendar_box").show();
        $("#select_departure_date").show();
        $("#select_arrival_date").hide();
        state = "departure_open";
    });
}

if(state == "arrival_open"){
    $("#calendar_arrival_open").click(function () {
        $("#calendar_box").hide();
        state = "closed";
    });
    $("#calendar_departure_open").click(function () {
        $("#select_departure_date").show();
        $("#select_arrival_date").hide();
        state = "departure_open";
    });
}

if(state == "departure_open"){
    $("#calendar_arrival_open").click(function () {
        $("#calendar_box").hide();
        $("#select_departure_date").hide();
        $("#select_arrival_date").show();
        state = "arrival_open";
    });
    $("#calendar_departure_open").click(function () {
        $("#calendar_box").hide();
        state = "closed";
    });
}

此代码适用于打开日历，但不适用于关闭日历。我不明白为什么。如您所见，如果“到达日历”已打开并且单击了离开日历链接，则会出现“出发日历”，反之亦然。但是，如果到达日历已打开并且点击了到达日历链接，则日历将关闭。

有人能看到问题吗？这种“状态”方法最适合处理我需要的方法吗？

Answer 1

试试这个：

var state = "closed";

$("#calendar_arrival_open").click(function () {
    if(state == "closed"){

        $("#calendar_box").show();
        $("#select_arrival_date").show();
        $("#select_departure_date").hide();
        state = "arrival_open";

    } else if(state == "arrival_open"){

        $("#calendar_box").hide();
        state = "closed";

    } else {

        $("#calendar_box").hide();
        $("#select_departure_date").hide();
        $("#select_arrival_date").show();
        state = "arrival_open";

    }
});

$("#calendar_departure_open").click(function () {
    if(state == "closed"){

        $("#calendar_box").show();
        $("#select_departure_date").show();
        $("#select_arrival_date").hide();
        state = "departure_open";

    } else if(state == "arrival_open"){

        $("#select_departure_date").show();
        $("#select_arrival_date").hide();
        state = "departure_open";

    } else {

        $("#calendar_box").hide();
        state = "closed";

    }
});

Answer 2

发生单击事件时运行的代码必须在click事件处理程序中定义。在您的代码中，您希望每次单击都执行状态检查，但是您在事件处理程序之外添加了if语句。然后你就会遇到第一个if区块中的处理程序。

您的代码说：“当state为x时，定义一个click事件处理程序来执行a;当state为y时，定义一个click事件处理程序来执行b;“。

你想要的是：“点击一个元素时，如果a是state，请x;如果b是{{1}，请state }}”。

看到区别？

Answer 3

您可以使用开关块来实现此目的。我不确定这是否会以编程方式更快，但看起来更容易维护。

这显然需要放在$(document).ready()处理程序中。

var state = "closed";

$("#calendar_arrival_open").click(function () {

switch(state){

case "closed":
    $("#calendar_box").show();
    $("#select_arrival_date").show();
    $("#select_departure_date").hide();
    state = "arrival_open"; 
break;
case "arrival_open":
    $("#calendar_box").hide();
    state = "closed";   
break;  
case "departure_open":
    $("#calendar_box").hide();
    $("#select_departure_date").hide();
    $("#select_arrival_date").show();
    state = "arrival_open";
break;  
}
})

$("#calendar_departure_open").click(function () {

switch(state){

case "closed":
    $("#calendar_box").show();
    $("#select_departure_date").show();
    $("#select_arrival_date").hide();
    state = "departure_open";
break;
case "arrival_open":
    $("#select_departure_date").show();
    $("#select_arrival_date").hide();
    state = "departure_open";
break;  
case "departure_open":
    $("#calendar_box").hide();
    state = "closed";
break;  
}
})

使用jQuery切换div的显示

3 个答案: