使用jQuery切换div的显示

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如果state是y ”。

看到不同？

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;  
}
})