如何使用 jQuery 显示/隐藏引导微调器？

Question

我试图在单击按钮后显示引导微调器，然后在从 API 获得响应（基本上是加载状态）后将其隐藏。

我的按钮如下：

 <div class="col-6">
    <button type="button" name="btn-enviar" class="btn btn-primary w-100">
    <span class="spinner-border spinner-border-sm mr-3" id="spinner" role="status" aria-hidden="true">
    </span>Enviar</button>
</div>

到目前为止，我已经尝试评论/取消评论我的 span 标签，但没有成功，会有更简单的方法来启动/停止我的微调器吗？

我从 这里 获取的评论/取消评论功能不起作用（按要求）：

 function comment(element) {
    element.html('<!--' + element.html() + '-->')
}

function uncomment(element) {
    element.html(element.html().substring(4, element.html().length - 3))
}

原文由 Rogerio Schmitt 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Html（添加类 .spinner）：

 <div class="col-6">
    <button type="button" name="btn-enviar" class="btn btn-primary w-100">
    <span class="spinner spinner-border spinner-border-sm mr-3" id="spinner" role="status" aria-hidden="true">
    </span>Enviar</button>
</div>

将 css 添加到 css 文件：

 #spinner { display:none; }
body.busy .spinner { display:block !important; }

或者使用可见性：

 #spinner { visibility:hidden; }
body.busy .spinner { visibility:visible !important; }

查询：

 $(document).ready( function()
{
  $('#spinner').on('click', function()
  {
    $('body').addClass('busy');
  });
});

完成后，执行：

 $('body').removeClass('busy');

通过将“busy”之类的类添加到 html 页面的主体，您还可以做一些非常好的事情，例如阻止输入元素等，而无需额外的 js 代码。让 CSS 代替 js 为您完成所有工作。您只需添加一些额外的 CSS 规则。

PS：使用 html 验证器检查您的 html 是否有错误。如果标记中有错误，可能会发生奇怪的事情或者它不起作用。

玩得开心。

原文由 Codebeat 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

元素上有 animation 和 -webkit-animation css 属性。

使用这样的类

.stop {
 animation-name: none !important;
 -webkit-animation-name: none !important;
}

使用 JQuery，您可以在元素上切换此类。如果添加，动画将停止。

更新 这将显示然后隐藏微调器。

 $(() => {
  $('button').on('click', e => {
    let spinner = $(e.currentTarget).find('span')
    spinner.removeClass('d-none')
    setTimeout(_ => spinner.addClass('d-none'), 2000)
  })
})

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://getbootstrap.com/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="canonical" href="https://getbootstrap.com/docs/4.3/components/spinners/">

<button class="btn btn-primary" type="button">
  <span class="d-none spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Click me...
</button>

原文由 ZorgoZ 发布，翻译遵循 CC BY-SA 4.0 许可协议