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()函数被调用）其工作正常，因为它调用代码的正确部分（{{1 }}）。

但是每当我试图删除现有订单时，它都无法正常工作。它只是再次调用代码的上半部分。

创建新订单的代码（实际上只是调出屏幕）是：

if (newOrderScreen.is(":visible"))

注意：选择行时会给出function new_order() { switchTab(newOrderScreen, orderListScreen); switchTab(availableProductsScreen, orderInformationScreen); }类。
注意：.selectedRow屏幕是标准显示，#list屏幕仅在单击按钮时显示。

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

#new-order

问题

如果它没有采用#new-order { position: absolute; left: 0; top: 0; width: 40%; z-index: 1; visibility: hidden; } #list { display: block; }声明的正确部分呢？为什么它在为新订单启动屏幕时首先起作用？

Answer 1

来自JQuery API文档：

Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout.

此信息可用here。

这就是为什么你的if语句不能按照你认为应该的方式工作的原因。

检查新订单是否设置为可见性：是否隐藏在您的第一个if语句中，而不是检查它是否可见。

刚刚与JavaScript男孩聊天，您可以使用jQuery .hide（）将其设置为：在运行if语句之前可见。

检查可见性的jQuery无法正常工作

1 个答案: