[英]Changing font awesome icon onclick function
I'm trying to swap .fa-eye to fa-eye-slash when user click on a button.当用户单击按钮时,我试图将 .fa-eye 交换为 fa-eye-slash。 What am I doing wrong?
我做错了什么? It's not working.
它不起作用。
HTML code: 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 code: Javascript代码:
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');
}
}
document.querySelector('button').addEventListener('click', function() { const icon = this.querySelector('i'); const text = this.querySelector('span'); if (icon.classList.contains('fa-eye')) { icon.classList.remove('fa-eye'); icon.classList.add('fa-eye-slash'); text.innerHTML = 'Hide'; } else { icon.classList.remove('fa-eye-slash'); icon.classList.add('fa-eye'); text.innerHTML = 'Show'; } });
<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <button><i class="fa fa-eye"></i> <span>Show</span></button>
Since you have inserted Jquery.既然你已经插入了 Jquery。 You can do this via Jquery easily.
您可以通过 Jquery 轻松完成此操作。
<button 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>
Now Jquery code for this is现在这个 Jquery 代码是
$("#show_hide_bt").click(function(event) {
$(this).find('i').toggleClass('fa-eye-slash');
});
If you want to remove the fa-eye class then you can chain another toggleClass or add this again如果要删除 fa-eye 类,则可以链接另一个 toggleClass 或再次添加
$(this).find('i').toggleClass('fa-eye');
Or add this in single line.或者在一行中添加它。 Comment if this doesnot help
如果这没有帮助,请发表评论
$(this).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>
I think you can get the results you want by simplifying your HTML and JQuery.我认为你可以通过简化你的 HTML 和 JQuery 来得到你想要的结果。
Try this snippet:试试这个片段:
$(document).ready(() => { const button = $(".btn"); button.click(() => { if (button.text() == " Show") { button.html('<i class="fa fa-eye-slash"></i> Hide'); } else { button.html('<i class="fa fa-eye"></i> Show'); } }); });
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/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 class='btn btn-default'><i class="fa fa-eye"></i> Show</button>
You could toggle the class like so: $('i').toggleClass("fa-eye-slash fa-eye");
你可以像这样切换类:
$('i').toggleClass("fa-eye-slash fa-eye");
, but since you want to change the text too, I would recommend the solution above. ,但由于您也想更改文本,我会推荐上面的解决方案。
function myFunction(x) { x.classList.toggle("fa-thumbs-down"); }
.fa { font-size: 50px; cursor: pointer; user-select: none; } .fa:hover { color: darkblue; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <p>Click on the icon to toggle between thumbs-up and thumbs-down (like/dislike):</p> <i onclick="myFunction(this)" class="fa fa-thumbs-up"></i>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.