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 때, a을 할 수있는 click 이벤트 핸들러를 정의합니다 state이 y 때, b을 할 수있는 click 이벤트 핸들러를 정의합니다."

당신이 원하는 것은 "요소를 클릭했을 때, state가 y 경우 a 경우 state이 x, 또는 b하면됩니다."

차이점을 확인 하시겠습니까?

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