代码之家 › 专栏 › 技术社区 › Birdman

单击时向HTML按钮添加图标

font-awesome button events html javascript

Birdman · 技术社区 · 6 年前

这是我的按钮:

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

在handlemyButtonClick()函数中,我有一些逻辑,但我想完成的是在执行该逻辑时添加一个等待图标。我发现了如何使用此代码:

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

如果我把它添加到我原来的button语句中,它是有效的,但它总是存在的。我只想在点击时显示这个。我正在尝试将“i class”添加到我的javascript点击函数中的按钮中。我试过用 .classList.add() 但我一定是做错了,或者是完全做错了。我该怎么做?

4 回复 | 直到 6 年前

Javapocalypse 6 年前

您需要做的是在方法的开头更新按钮的内部HTML。 handleMyButtonClick()

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>

china veerreddy 6 年前

我想这会对你有用的,请查查

<!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>

Rakesh Makluri 6 年前

由于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;
}

Birdman 6 年前

谢谢你的所有建议,但我有一个更简单的答案。

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

我对网络编程很陌生。抱歉,我不能为您解释,但是这一行会立即更改我的javascript点击功能中的按钮代码。