javascript - jQuery 检查可见性不能正常工作

Question

我正在制作一个用于管理餐厅订单和财务的网络应用程序。为此，在我的应用程序中，我需要更多屏幕才能使用。我有这个小功能可以在这些可见性之间切换:

function switchTab(toActivate, toDeactivate) {
    var $toActivate = $(toActivate);
    var $toDeactivate = $(toDeactivate);

    if ($toDeactivate.is(":visible")) {
        $toDeactivate.css("visibility", "hidden");
        $toActivate.css("visibility", "visible");
    }
}

我还创建了一个删除现有订单的功能，同样的功能是在创建订单时删除订单。

function delete_order() {
    if (confirm("Are you sure you want to delete this order?")) {
        if ($("#new-order").is(":visible")) {
            switchTab(orderListScreen, newOrderScreen);
            switchTab(orderInformationScreen, availableProductsScreen);

            alert("Only this is getting called");
        } else if ($("#list").is(":visible")) {
            $(".selectedRow").remove();

            alert("Why doesnt this get called?");
        }
    }
}

问题

每当我创建一个订单，然后通过删除按钮删除它(调用 delete_order() 函数的地方)它工作正常，因为它调用了正确的部分代码 ( if (newOrderScreen.is(":visible")) ).

但每当我尝试删除现有订单时，它都不起作用。它只是再次调用相同的上半部分代码。

创建新订单的代码(实际上只是调出屏幕)是这样的:

function new_order() {
    switchTab(newOrderScreen, orderListScreen);
    switchTab(availableProductsScreen, orderInformationScreen);
}

• 注意:.selectedRow类是在选中一行时给出的。

• 注意:#list界面是标准显示的，#new-order界面只有在点击它的按钮时才会显示。

正在切换的 2 个屏幕的 CSS 是:

#new-order {
    position: absolute;
    left: 0;
    top: 0;
    width: 40%;
    z-index: 1;
    visibility: hidden;
}

#list {
    display: block;
}

问题

为什么它没有采用 if 语句的正确部分？为什么在打开新订单屏幕时它首先起作用？

Answer 1

来自 JQuery API 文档:

visibility: hidden 或 opacity: 0 的元素被认为是可见的，因为它们仍然占用布局中的空间。

此信息可用here .

这就是为什么您的 if 语句没有按照您认为的方式工作。

检查 new-Order 是否设置为 visibility:hidden 在你的第一个 if 语句中，而不是检查它是否可见。

刚刚和 JavaScript 小伙伴聊过，你也可以在运行 if 语句之前使用 jQuery .hide() 将其设置为不可见。