点击更改字体真棒图标答案

【问题标题】：Change Font Awesome Icon on click点击更改字体真棒图标
【发布时间】：2017-09-09 01:52:31
【问题描述】：

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

我看到很多人想要切换效果，但最终我希望它改变一次，如果再次点击就不会变回来。

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

【问题讨论】：

你能提供一个小提琴吗？
你试过javascript:;还是javascript:void(0)？
@Jai 和 @Manoz javascript:void(0) 的使用确实解决了我遇到的语法错误，但是当我复制和粘贴您的代码时，我没有在 Firefox 50.1 中本地更改图标。 @Jai 你的答案似乎在这里，但我无法在本地复制它，即使我点击它两次，它也会变回来。
这应该像@Jai 在他的回答中提到的那样工作。唯一的嫌疑是你如何在你的 DOM 中渲染#facebookicon。这是存在的还是你动态加载的？
@Lee Han Kyeol 这有帮助吗？ jsfiddle.net/g_thomson/05zb3L6m/13

标签： javascript jquery icons font-awesome

【解决方案1】：

你必须在你的锚的 href 属性中使用javascript:void(0)，正如我在评论中提到的，如果你的锚元素不是动态创建的，你可以使用你的第一个 sn-p：

$('#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>

【讨论】：

看我上面的评论
@G_T 这很奇怪，但在这里很难说出发生了什么。您能否确认在执行此操作时控制台中没有出现任何错误？
当我将答案的 div 标签中的代码复制到我的问题的 HTML 正文中时，我可以确认我在控制台中没有收到任何错误。

【解决方案2】：

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

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

【讨论】：

看我上面的评论