为什么 JQuery .hide() 函数不能与 bootstrap 微调器一起使用？

Question

当我的服务器回答 ajax 查询时，我正在做一个简单的微调器反馈。我在进行 ajax 调用之前调用了 JQuery .show() 函数，并在请求的 .always() 回调中调用了 .hide() 函数。

但我的微调器从不隐藏！我不明白为什么...有人在使用 JQuery 的 .hide() 函数和 Bootstrap 微调器时遇到过这个问题吗？

关于 .getJSON() here, more info on the .hide() and .show() here 的更多信息。

这是我的 html 微调器，它来自 here

<div id="spinner-map-right-click" class="d-flex justify-content-center">
    <div class="spinner-border" role="status">
        <span class="sr-only">Loading...</span>
    </div>
</div>

这是我的 javascript :

$('#spinner-map-right-click').show()
$.getJSON({ url: "myurl" })
    .done(function(data) {
        // does stuff here and it works
    })
    .fail(function(data) {
        // display error message if there is an error
    })
    .always(function(data) {
        console.log("Hiding")
        // the console log displays but my spinner is always ther :(
        $('#spinner-map-right-click').hide()
    });

请求有效，我正确获取数据并且 "Hiding" 正确显示，因此 always() 回调被正确调用，当我检查来自 Firefix 的代码时，我看到 <div>已正确修改：

<div id="spinner-map-right-click" class="d-flex justify-content-center" style="display: none;">
    <div class="spinner-border" role="status">
        <span class="sr-only">Loading...</span>
    </div>
</div>

Answer 1

因为d-flexclass。你可以试试

$('#spinner-map-right-click').addClass('d-none') // removeClass('d-none')

d-flex 由 bootstrap 使用 !important 异常覆盖 inline 样式

Answer 2

这是我的解决方案。它只发生在 class d-flex。 因为这个 class 包含一个属性 display: flex !important;。由于存在 !important 异常，display: none; 不起作用 （N.B。当您使用 .hide() 时，它会将 display: none; 分配给元素） .这就是为什么我删除了 class d-flex 并在没有 !important 异常的情况下为元素提供了以下样式。现在它开始工作了。

#spinner-map-right-click {
  display: flex;
}

Codepen link

为什么 JQuery .hide() 函数不能与 bootstrap 微调器一起使用？

Why doesn't JQuery .hide() function work with bootstrap spinner?

css

ajax

jquery

spinner