如何解决尝试更改提交按钮的跨度类以显示引导加载微调器
我正在尝试使用JavaScript,如下图所示,将一个提交按钮更改为带有文本“ Loading ...”的加载微调器。
我能够更新按钮的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");
}
任何帮助将不胜感激。谢谢。
解决方法
这里有一支工作笔: 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
,我认为您不应该更改按钮的内部HTML或类。创建一个新的跨度,它是正在加载的动画,但默认情况下是使用css prop <input type="color" value="#e66465" id="color_picker">
<label for="color_picker">Pick a colour</label>
隐藏的。
单击按钮后,可通过动态更改CSS来隐藏按钮,并以相同方式显示跨度。然后,只要完成加载,就将其向后翻转。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。