如何解决Bootstrap 4:如何重置按钮加载
我正在使用此代码加载按钮
<script>
$('#load1').click(function() {
$('#load1').html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').attr('disabled',true);
});
</script>
如何在此代码中设置setTimeout
解决方法
您可以使用setTimeout
函数在每次单击x
的{{1}}秒后隐藏加载和微调器。
为了使按钮button
处于其return
状态。我们需要将该单击的按钮的HTML保存在变量上,然后将original
重新应用到相关的HTML
按钮上。
还可以使用clicked
选择器代替class
进行按钮单击,以使您可以重复使用相同的功能,其中多个id
消息和loading
消息具有相同的类。
在这种情况下,使用prop设置spinner
属性disabled
是不的理想选择,不被使用
实时工作示例:
attr
$('.load1').click(function() {
var _this = $(this) //click button
var existingHTML = _this.html() //store exiting button HTML
//Add loading message and spinner
$(_this).html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').prop('disabled',true)
setTimeout(function() {
$(_this).html(existingHTML).prop('disabled',false) //show original HTML and enable
},3000) //3 seconds
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。