Question

这是我的按钮：

<button type="button" id="myButton" class="myButtonCSS" onclick="handleMyButtonClick()"> myButton! </button>

在我的handleMyButtonClick（）函数中，我有一点逻辑，但是我要实现的是在执行该逻辑时添加一个等待图标。我发现了如何使用此代码执行此操作：

<i class="fa fa-spinner fa-spin"></i>

如果我将其添加到我的原始按钮语句中，则可以使用，但始终在那里。我只希望在单击时显示它。我正在尝试将“ i类”添加到JavaScript on click函数中的按钮中。我尝试使用.classList.add()，但我一定做错了，或者完全把它弄错了。我该怎么办？

Answer 1

您需要做的是在方法handleMyButtonClick()的开头更新button的内部html

var btn = document.getElementById('myButton');
btn.innerHTML = '<i class = "fa fa-spinner fa-spin"></i> Please wait...';

然后，当您完成逻辑运算后，将按钮重置为原始状态。

btn.innerHTML = 'myButton!';

看看这个完整的代码。随心所欲地工作。

function handleMyButtonClick(){
 // Get button element
 btn = document.getElementById('myButton');
 
 // Set the spinner 
 btn.innerHTML = '<i class = "fa fa-spinner fa-spin"></i> Please wait...';
 
 // Do the work. A sample method to wait for 3 second.
 setTimeout(function(){ 
 
 console.log("work done"); 
 
 // When the work is done, reset the button to original state
 btn.innerHTML = 'myButton!';
 
 }, 3000); 
 
}

<button type="button" id="myButton" class="myButtonCSS" onclick="handleMyButtonClick()"> myButton! </button>

Answer 2

我想这会为您解决的，请检查

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body>

<button type="button" id="myButton" class="" onclick="handleMyButtonClick()"> <span id='spin'></span>myButton! </button>

</body>
<script>
function handleMyButtonClick(){

$("#spin").addClass("fa fa-spinner fa-spin");

setTimeout(()=>{
//Do some logic 
$("#spin").removeClass("fa fa-spinner fa-spin");
},5000)
}
</script>
</html>

Answer 3

由于javascript使用单线程，并且如果您的代码是同步的，则您将无法立即看到样式更改。方法执行完成后，它将以新样式呈现UI。因此，就您而言，它不会显示任何差异。在功能结束时显示和隐藏。如果要显示微调器，则必须将微调器隐藏在setTimeout（）中。

尝试以下操作：

<button type="button" id="myButton" class="myButtonCSS" onclick="handleMyButtonClick()">
   <i class="fa fa-spinner fa-spin"></i>

    myButton!
</button>

function handleMyButtonClick() {
    document.getElementById('myButton').classList.add('loading');

    // your logic goes here


    setTimeout(function() {
       document.getElementById('myButton').classList.remove('loading');
    }, 2000);

}

.myButtonCSS {
   position: relative;
}

.myButtonCSS .fa-spinner {
   display: none;
   position: absolute;
   left: 5px;
   top: 5px;// you can modify according to your button height and width
}

.myButtonCSS.loading .fa-spinner {
   display: inline-block;
}

Answer 4

感谢您的所有建议，但我的答案要简单得多。

AT TIME ZONE

我对网络编程非常陌生。抱歉，我无法为您解释，但这1行代码会立即更改JavaScript on click函数中按钮的代码。

单击时将图标添加到HTML按钮

4 个答案: