Question

我一直试图让一个加载按钮进入一个引导刷新glyphicon不断旋转的位置，直到服务器响应了我的请求。这是按钮：

<button type="submit" id="loading" name="loading" class="btn btn-lg btn-default" 
onclick="change()" style="margin-top:40px; margin-bottom:25px;">
span id="state"></span>Submit</button>

当我点击按钮时，按钮左侧的glyphicon开始旋转，到目前为止该部分正在工作。按钮右侧的文本（现在：提交）需要更改为＆＃34;正在加载＆＃34;。到目前为止，我已经得到了以下脚本：

<script type="text/javascript">
    function submit() {
        document.getElementById("loading").click();
    }
    function change() { 
        var mybutton = document.getElementById("loading");
        var mystring1 = document.getElementById("input_ipaddress").value;
        var mystring2 = document.getElementById("input_hostname").value;
        var mystring3 = document.getElementById("input_comms").value;
        if (mystring1 && mystring2 && mystring3) {
            document.getElementById("state").className = "glyphicon glyphicon-refresh glyphicon-refresh-animate";   
            mybutton.innerHTML = "Loading...";
        }       
    }
    // remove all classes of the "state" span class
    window.onload = function() {
        document.getElementById('state').className = "";
    };
</script>

CSS，如果这有助于解决我的问题：

.glyphicon-refresh-animate {
-animation: spin .7s infinite linear;
-webkit-animation: spin2 .7s infinite linear;
}

@-webkit-keyframes spin2 {
from { -webkit-transform: rotate(0deg);}
to { -webkit-transform: rotate(360deg);}
}

@keyframes spin {
from { transform: scale(1) rotate(0deg);}
to { transform: scale(1) rotate(360deg);}
}

我一直在尝试使用innerHTML，但这当然会替换给定文本的所有内容（包括glyphicon）。我该如何解决这个问题？

Answer 1

问题是您的新文字Loading..重叠glyphicon。

试试这个：

mybutton.innerHTML = '<span id="state"></span>Loading..'

Answer 2

您也可以使用;

<button type="button" class="btn btn-primary btn-lg" 
   data-loading-text="<i class='fa fa-spinner fa-spin'></i> Processing">
   <i class="fa fa-arrow-down"></i>&nbsp;Download
</button>

$('.btn').on('click', function() {
   var $this = $(this);
   $this.button('loading');
   setTimeout(function() {
      $this.button('reset');
   }, 8000);
});

资料来源：@ codepen

更改引导程序加载按钮文本

2 个答案: