尝试更改提交按钮的跨度类以显示引导加载微调器答案

【问题标题】：Trying to change the span class for a submit button to show bootstrap loading spinner尝试更改提交按钮的跨度类以显示引导加载微调器
【发布时间】：2021-01-01 13:36:21
【问题描述】：

我正在尝试使用 JavaScript 将提交按钮更改为带有“正在加载...”文本的加载微调器，如下图所示。

我能够更新按钮的 innerHTML，但我无法更改控制实际微调器的 span 类。

这是我的按钮 html：

<button class="btn btn-primary mx-3" id="submit" onclick="loading()" type="submit">
  <span id="button_span"></span>
  Submit
</button>

这里是 JavaScript：

function loading() {
    var button = document.getElementById("submit");
    button.innerHTML = "Loading...";
    var span = document.getElementById("button_span");
    span.classList.add("spinner-grow");
    span.classList.add("spinner-grow-sm");
}

任何帮助将不胜感激。谢谢。

【问题讨论】：

标签： javascript html css button bootstrap-4

【解决方案1】：

我认为您不应该更改按钮的内部 HTML 或类。创建一个新的 span，它是加载动画，但默认使用 css prop display: none 隐藏。

单击按钮时，通过动态更改 css 来隐藏按钮并以相同的方式显示 span。然后，每当加载完成时，只需将其翻转回来。

【讨论】：

【解决方案2】：

这里有一支工作笔： https://codepen.io/cbrown___/pen/dyMKQQb

使用 Jquery 和 Font-awesome。有很多方法可以做到这一点，但这是其中之一。

HTML

<button class="btn btn-primary mx-3" id="submit" onclick="loading()" type="submit">
   <i class="fas fa-spinner fa-spin" style="display:none;"></i>
  <span class="btn-text">Submit</span>
</button>

.JS

function loading() {
  $(".btn .fa-spinner").show();
  $(".btn .btn-text").html("Loading");
  
}

也推荐这个解决方案： Bootstrap 4 Loading Spinner in button

【讨论】：

太棒了，谢谢！我所做的唯一更改是使用 grow-spinner 而不是 fa-spinner。