單擊更改“真棒字體”圖標
[英]Change Font Awesome Icon on click
問題描述
我試圖更改字體真棒圖標的類，以便單擊時更改圖標。 我已經閱讀了其他幾個問題（例如這個問題， 這個問題以及這個問題 ），但是未能獲得一個可行的示例。
在這種情況下，我試圖將Facebook圖標更改為刻度。
HTML：
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="./java.js"></script>
</head>
<body>
<div>
<a href="javascript:void" rel="me"><i class="fa fa-twitter-square fa-3x"></i></a>
<a id="facebookicon" href="javascript:void" rel="me"><i class="fa fa-facebook-square fa-3x"></i></a>
</div>
</body>
</html>
使用Javascript：
$('#facebookicon').click(function(){
$(this).find('i').toggleClass('fa-facebook-square fa-check-square')
});
我也嘗試過以下Javascript代碼：
$('body').on('click', '#facebookicon', function(){
$('i').toggleClass('fa-facebook-square fa-check-square');
});
單擊圖標時，控制台中出現語法錯誤：
SyntaxError: expected expression, got end of script
我認為這與javascript:void但我不確定。 當我嘗試解決此問題時，答案似乎都是人們在錯誤的地方加了引號或將雙引號和單引號混在一起。 我認為情況並非如此。
我看到許多人都希望具有切換效果，但最終我希望它能夠一次更改，如果再次單擊就不會更改。
有人可以指出我正確的方向嗎？
2 個解決方案
解決方案1
0 2017-04-13 05:06:16
您必須在錨的href屬性中使用javascript:void(0) ，並且正如我在評論中所提到的，如果您的錨元素不是動態創建的，則可以使用第一個代碼段：
$('#facebookicon').click(function() { $(this).find('i').toggleClass('fa-facebook-square fa-check-square') });
a {color: magenta;
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <a href="javascript:void(0)" rel="me"><i class="fa fa-twitter-square fa-3x"></i></a> <a id="facebookicon" href="javascript:void(0)" rel="me"><i class="fa fa-facebook-square fa-3x"></i></a> </div>
解決方案2
0 2017-04-13 05:06:25
將javascript:void更改為javascript:void(0)或javascript:;
如何在點擊時更改字體真棒圖標
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.