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

到目前为止，我尝试注释/取消注释我的跨度标签，但没有成功，是否有一种更简单的方法来启动/停止我的微调器？

我的评论/取消评论功能，来自 here并且不工作(根据要求):

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; }

JQuery:

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

完成后，执行:

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

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

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

玩得开心。