单击更改“真棒字体”图标

Question

I am trying to change the class of a font awesome icon so that it changes icon when clicked. 我试图更改字体真棒图标的类，以便单击时更改图标。 I have read several other questions (like this one and this one and this one ) but have been unsuccessful in getting a working example. 我已经阅读了其他几个问题（例如这个问题，这个问题以及这个问题），但是未能获得一个可行的示例。

In this case I am trying to change the facebook icon to a tick. 在这种情况下，我试图将Facebook图标更改为刻度。

HTML: 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: 使用Javascript：

$('#facebookicon').click(function(){
    $(this).find('i').toggleClass('fa-facebook-square fa-check-square')
});

I have also tried this Javascript code: 我也尝试过以下Javascript代码：

$('body').on('click', '#facebookicon', function(){
   $('i').toggleClass('fa-facebook-square fa-check-square');
});

When I click of the icon I get a syntax error in the console: 单击图标时，控制台中出现语法错误：

SyntaxError: expected expression, got end of script

I think this relates to the javascript:void but i'm not sure. 我认为这与javascript:void但我不确定。 When I tried to fix this the answers all seem to be people having quotation marks in the wrong place or mixing and matching double and single quotes. 当我尝试解决此问题时，答案似乎都是人们在错误的地方加了引号或将双引号和单引号混在一起。 I don't think that it is the case here. 我认为情况并非如此。

I see many people aiming to have the toggle effect but ultimately I would like it such that it changes once and will NOT change back if clicked again. 我看到许多人都希望具有切换效果，但最终我希望它能够一次更改，如果再次单击就不会更改。

Can someone point me in the right direction? 有人可以指出我正确的方向吗？

Answer 1

You have to use javascript:void(0) in the href attribute of your anchor and as i mentioned in the comment you can use your first snippet if your anchor elements are not created dynamically: 您必须在锚的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

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

Here is an example https://jsfiddle.net/54wkxk4y/ 这是一个示例https://jsfiddle.net/54wkxk4y/

单击更改“真棒字体”图标

问题描述

2 个解决方案

解决方案1
0 2017-04-13 05:06:16

解决方案2
0 2017-04-13 05:06:25

单击更改“真棒字体”图标

问题描述

2 个解决方案

解决方案1 0 2017-04-13 05:06:16

解决方案2 0 2017-04-13 05:06:25

解决方案1
0 2017-04-13 05:06:16

解决方案2
0 2017-04-13 05:06:25