如何使用 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))
}

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');

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

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

玩得开心。

Answer 2

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

使用这样的类

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

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

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

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

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