本文介绍了更改字体真棒图标onclick功能的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
当用户单击按钮时,我正在尝试将.fa-eye交换为fa-eye-slash.我究竟做错了什么?它不起作用.
I'm trying to swap .fa-eye to fa-eye-slash when user click on a button. What am I doing wrong? It's not working.
HTML代码:
<button onclick="arata_ascunde(this);" style="align:right;font-size:13px"
class="btn btn-info " id="show_hide_bt" style="background-color:#00b0ff;"><i
class="fa fa-eye"></i> Show</button>
JavaScript代码:
Javascript code:
function arata_ascunde(button) {
var x = document.getElementById('showhide');
var change = document.getElementById("show_hide_bt");
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
if (change.innerHTML == ' Show')
{
change.innerHTML = ' Hide';
$(button).find('i').toggleClass('fa-eye').toggleClass('fa-eye-slash');
}
else {
change.innerHTML = ' Show';
$(button).find('i').toggleClass('fa-eye-slash').toggleClass('fa-eye');
}
}
推荐答案
function arata_ascunde(button) {
var x = $('#showhide');
$(button).find('i').remove();
if ($(button).text().trim() == 'Show') {
$(button).html($('<i/>',{class:'fa fa-eye-slash'})).append(' Hide');
x.fadeIn();
}
else {
$(button).html($('<i/>',{class:'fa fa-eye'})).append(' Show');
x.fadeOut();
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="arata_ascunde(this);" style="align:right;font-size:13px"
class="btn btn-info " id="show_hide_bt" style="background-color:#00b0ff;">
<i class="fa fa-eye"></i> Show
</button>
<div id="showhide" style="background-color:red;width:100px;height:100px;margin:10px;display:none;"></div>
这篇关于更改字体真棒图标onclick功能的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!