首页 > 解决方案 > 升级到 Bootstrap 4、jQuery 3.3.1 后 jQuery .show() /.hide() 无法正常工作

问题描述

所以我们有一些像这样的代码

    function handleDayClick(date)
    {
        if (date.local() < startDate || date.local() >= endDate) {
            $("#dayClickMsg").show();
            return;
        }
        $('#dayClickMsg').hide();
        //do other stuff
    }

和一些 HTML:

    <div id="dayClickMsg" hidden style="color:seagreen; float:right">
        Clicked day not in range.
    </div>

但升级后,该功能似乎无法正常工作。在 .show() 上设置断点告诉我正在正确获取元素,但 .show() 方法调用不起作用。同样, .hide() 也不起作用。

编辑,控制台错误:

sign-error-icon.png:1 Failed to load resource: the server responded with a status of 404 ()
help-icon.png:1 Failed to load resource: the server responded with a status of 404 ()
popper:37 Uncaught SyntaxError: Unexpected token export
sign-error-icon.png:1 Failed to load resource: the server responded with a status of 404 ()
help-icon.png:1 Failed to load resource: the server responded with a status of 404 ()

编辑:可能与https://jquery.com/upgrade-guide/3.0/#break-change-show-hide-and-toggle-methods-now-respect-more-stylesheet-changes有关

标签: jquerybootstrap-4

解决方案


尝试使用属性 in 代替

function handleDayClick(date)
    {
        if (date.local() < startDate || date.local() >= endDate) {
            $("#dayClickMsg").prop('hidden', false);

            return;
        }
        $('#dayClickMsg').prop('hidden', true);

        //do other stuff
    }

推荐阅读