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

Question

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

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

更多关于.getJSON()here的信息，更多关于.hide()和.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-flex 类。你可以试试

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

d-flex 通过引导使用 !important 异常覆盖 inline 样式

Answer 2

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

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

Codepen link