升级到 Bootstrap 4、jQuery 3.3.1 后 jQuery .show() /.hide() 无法正常工作

Posted 2023-02-22

【中文标题】升级到 Bootstrap 4、jQuery 3.3.1 后 jQuery .show() /.hide() 无法正常工作

【英文标题】：jQuery .show() /.hide() not working after upgrade to Bootstrap 4, jQuery 3.3.1

【发布时间】：2019-07-14 18:01:32

【问题描述】：

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

    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/#breaking-change-show-hide-and-toggle-methods-now-respect-more-stylesheet-changes有关

【问题讨论】：

任何我们应该知道的控制台错误？

一个观察是根据您的有限示例，您没有传递 startDate 或 endDate，它们在哪里找不到但在您的函数中使用

imvain - 此代码是大型日历模块的一部分，日期已正确传递，并且 .show() 行按预期到达。我想我会省去你们的细节。

@JonP - 我的图标由于某种原因没有加载，这很好，因为我设置了一个新图标要使用，并且存在弹出问题

我知道它是一个 HTML5 属性，但是您是否尝试过在 div 中不使用 hidden 属性的情况下对其进行测试？

【参考方案1】：

尝试改用属性

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

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

        //do other stuff