javascript - 我正在研究 Bootstrap 微调器，每当我们单击按钮时，我都会被加载微调器卡住

Question

<div class="container">
<h1 id="Tickets"><span class="spinner-grow text-muted"></span></h1>
</div>

1. 在这里，我展示了一个正常的引导微调器。每当我们加载 html 页面时，它都是可见的。2）每当我们单击按钮时，我都需要运行。在获得输出微调器后应该停止，如果我们再次按下按钮，微调器应该可见

$(document).ready(function (data) {
  $("#btnGo").click(function () {
}
}
[![need to load spinner inside kpi widget][1]][1]

Answer 1

向微调器添加一个 id：

<span class="spinner-grow text-muted" id='spinner'></span>

当你想显示微调器时：

$("#spinner").removeClass("d-none");

当你想隐藏微调器时：

$("#spinner").addClass("d-none");

Answer 2

你可以通过添加一个类来隐藏微调器。喜欢

.hidden {
 display:none;
}

然后在您的 ajax 请求完成时应用此类，并在单击按钮时删除。

禁用微调器

$.ajax({
..
complete:function(){
   $("#spinner").addClass("hidden")
}
})

显示微调器

$("#btnGo").click(function () {
  $("#spinner").removeClass("hidden");
}