Question

我正在尝试更改字体真棒图标的类，以便在单击时更改图标。我已经阅读了其他几个问题（例如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有关，但我不确定。当我试图解决这个问题时，答案似乎都是人们在错误的地方使用引号或混合和匹配双引号和单引号。我不认为这是这种情况。

我看到许多人的目标是切换效果，但最终我希望它改变一次，如果再次点击则不会改变。

有人能指出我正确的方向吗？

Answer 1

你必须在你的锚的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>

Answer 2

将javascript:void更改为javascript:void(0)或javascript:;

这是一个例子 https://jsfiddle.net/54wkxk4y/

点击更改字体真棒图标

2 个答案: