Javascript 使用jQuery切换div的显示

我有两个链接，一个id为“calendar#u arrival#u open”，另一个id为“calendar#u Disease#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";
    });
}

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

有人看到问题了吗？这个“状态”方法是处理我需要的东西的最佳方法吗？

试试这个：

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

    }
});

试试这个：

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

    }
});

---

发生单击事件时运行的代码必须在

click

事件处理程序中定义。在代码中，您希望在每次单击时执行状态检查，但在事件处理程序之外添加了

if

语句。然后，从第一个

if

块开始，您就必须使用这些处理程序

您的代码显示：“当

状态

为

x

时，定义一个

单击

事件处理程序以执行

a

；当

状态

为

y

时，定义一个

单击

事件处理程序以执行

b

；”

您想要的是：“单击元素时，如果

状态
为
x
，则执行
a
，如果
状态
为
y
，则执行
b
”

看到区别了吗？
发生单击事件时运行的代码必须在
click
事件处理程序中定义。在代码中，您希望在每次单击时执行状态检查，但在事件处理程序之外添加了
if
语句。然后，从第一个
if
块开始，您就必须使用这些处理程序

您的代码显示：“当
状态
为
x
时，定义一个
单击
事件处理程序以执行
a
；当
状态
为
y
时，定义一个
单击
事件处理程序以执行
b
；”

您想要的是：“单击元素时，如果
状态
为
x
，则执行
a
，如果
状态
为
y
，则执行
b
”

看到区别了吗？
您可以使用开关块来实现这一点。我不确定这在程序上是否更快，但在我看来它更容易维护

这显然需要放在
$（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;  
}
})

您可以使用开关块来实现这一点。我不确定这在程序上是否更快，但在我看来它更容易维护

这显然需要放在
$（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;  
}
})

您的
if
语句应该在事件处理程序内部，而不是外部！这是因为javascript只被浏览器解释一次，也就是说，从未被解释为“状态”=“已关闭”。你需要把它放在事件处理程序中。需要更多的作用域。这段代码重写了这些链接的onclick方法，在单击之前它不会执行任何操作。这个代码什么时候执行？加载文档时，或每次单击时？您的
if
语句应该在事件处理程序内部，而不是外部！这是因为javascript只被浏览器解释一次，也就是说，从未被解释为“状态”=“已关闭”。你需要把它放在事件处理程序中。需要更多的作用域。这段代码重写了这些链接的onclick方法，在单击之前它不会执行任何操作。这个代码什么时候执行？文档加载时，或每次单击时？如果/当有经验的人阅读此内容时，他们是否可以确认这是一个合适的解决方案？我是新手，所以最好确定一下！谢谢：-）如果有经验的人读到这篇文章，他们能确认这是一个合适的解决方案吗？我是新手，所以最好确定一下！谢谢：-）