Question

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

但是我的转盘永远不会隐藏！我不明白为什么...有人通过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

为什么JQuery .hide（）函数不能与Bootstrap Spinner一起使用？

2 个答案: