单击更改字体真棒图标

我正在尝试更改字体真棒图标的类，以便在单击时更改图标。我已阅读其他几个问题（如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

看到我上面的评论 –

单击更改字体真棒图标

回答

相关问题