如何在按钮上显示 FontAwesome 微调器？

Question

我使用 Bootstrap 和 FontAwesome 有以下 HTML：

    <button type="submit" class="btn btn-primary">
         <i class="fas fa-spinner fa-spin" style="display:none;"></i> 
         <i class="fa-solid fa-file-code"></i> HTML
    </button>

使用 JQuery，我有一个应该显示 i.fa-spinner 元素的点击事件：

$(".btn").click(function (event) {
    $(".fa-spinner", this)
         .show()
         .attr('style', 'display:inline-block;');

     return true;});

这不起作用——尽管源代码似乎正在更新 i 元素上的样式属性，但它实际上并没有显示在页面上。如果我向单击事件返回 false，它会起作用（微调器显示），但显然该按钮不会提交表单。

我也在用锚元素做同样的事情，而且它们工作得很好。

有什么建议吗？我尝试将 i 元素包装在 span 元素中并显示/隐藏它，但它仍然不起作用。

我正在使用 Bootstrap 5.1、FontAwesome 6.2.1 和 JQuery 3.5。

Answer 1

如果您使用 Bootstrap，请使用内置类，即

d-none

。

您可以打开/关闭此类，或在单击时将其删除。

$(".btn").click(function(event) {
  $(this)
    .find(".fa-spinner")
    .removeClass('d-none'); // or $.fn.toggleClass
  return true;
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

<button type="submit" class="btn btn-primary">
   <i class="fas fa-spinner fa-spin d-none"></i> 
   <i class="fa-solid fa-file-code"></i> HTML
</button>