1

ID #calendar_arrival_open と #calendar_departure_open の 2 つのリンクがあります。どちらのリンクも、カレンダーを含む div を表示するかどうかを制御しますが、どちらの場合も、2 つの同一のカレンダーが読み込まれないように、表示されるカレンダーは同じカレンダーです。次のコードを使用して、リンクがクリックされたときにカレンダーの開閉を切り替えようとしています。

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定義します。がの場合、実行するイベント ハンドラーを定義します;」。clickastateyclickb

あなたが望むのは、「要素がクリックされたときに、aif stateis x、またはbif stateis を実行するy」です。

違いを見ます？

于 2012-06-20T17:15:51.343 に答える
0

これを実現するには、スイッチブロックを使用できます。プログラム的にそれが速いかどうかはわかりませんが、私には維持しやすいように見えます。

$(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 に答える