1

我有两个链接，一个带有 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";
    });
}

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

任何人都可以看到问题吗？这种“状态”方法是处理我需要的最佳方法吗？

4

3 回答 3

2

试试这个：

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";

    }
});
于 2012-06-20T17:09:15.440 回答
2

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

你的代码说：“当state是x，定义一个click事件处理程序做a；当state是y，定义一个click事件处理程序做b;”。

你想要的是：“当一个元素被点击时，做aif stateis x, or bif stateis y”。

看到不同？

于 2012-06-20T17:15:51.343 回答
0

您可以使用 switch 块来实现这一点。我不确定这是否以编程方式更快，但对我来说它看起来更容易维护。

这显然需要放在$(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;  
}
})
于 2012-06-20T17:17:15.780 回答