單擊更改字體真棒圖標

我正在嘗試更改字體真棒圖標的類，以便在單擊時更改圖標。我已閱讀其他幾個問題（如this one和this one和this one），但在獲取工作示例方面未能成功。單擊更改字體真棒圖標

在這種情況下，我試圖將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有關，但我不確定。當我試圖解決這個問題的時候，所有的答案似乎都是在錯誤的地方有引號的人或者混合並匹配雙引號和單引號的人。我不認爲這是事實。

我看到很多人打算有切換效果，但最終我希望它會改變一次，如果再次點擊，它將不會變回。

有人能指出我正確的方向嗎？

來源

2017-04-13 G_T

你能提供一個小提琴嗎？ –

你試過'javascript：;'或'javascript：void（0）'？ – Manoj

@Jai和@Manoz使用'javascript：void（0）'確實解決了我遇到的語法錯誤，但是當我複製並粘貼代碼時，我沒有在Firefox 50.1中本地更改圖標。 @Jai你的答案似乎在這裏做，但我無法在本地重現它，即使如此，如果我點擊它兩次，它會改變回來。 –

您的錨的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>

來源

2017-04-13 05:06:16 Jai

看到我的評論 –

以上@G_T這很奇怪，但這裏很難說出發生了什麼。你能否確認你在控制檯中沒有出現任何錯誤？ – Jai

當我將您的答案的div標籤中的代碼複製到我的問題的HTML正文中時，我可以確認在控制檯中沒有任何錯誤。 –

更改javascript:void至javascript:void(0)或javascript:;

以下是一個示例 https://jsfiddle.net/54wkxk4y/

來源

2017-04-13 05:06:25 Manoj

看到我上面的評論 –

單擊更改字體真棒圖標

回答

相關問題