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

jQuery checking for visibility doesnt work correctly

本文关键字：工作 常工作 检查 可见性 不能 jQuery      更新时间：2023-09-26

我正在制作一个用于管理餐厅订单和财务的web应用程序。在我的应用程序中，我需要更多的屏幕来工作。我用这个小函数在这些可见性之间切换:

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画面只有点击按钮才会显示

正在切换的两个屏幕的CSS为:

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

为什么它没有取if语句的正确部分?为什么当打开屏幕进行新订单时，它首先会起作用?

来自JQuery API文档:

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

此信息可在此处找到。

这就是为什么你的if语句没有按照你想象的方式工作。

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

刚刚与JavaScript男孩聊天，您可以使用jQuery .hide()将其设置为不可见，然后运行您的if语句，以及

相关文章：