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