按钮点击切换字体真棒类

Question

我在此jsfiddle中有代码，我希望使用javascript在按钮点击时更改字体真棒图标，但它似乎确实有效。我是javascript的新手，所以请原谅我，如果这是一个愚蠢的问题。

HTML

<button id="favBtn" onclick="fav();">
    <i id="favIcon" class="fa fa-star-o"></i>&nbsp;Favourite
</button>

的Javascript

function fav() {
    document.getElementById("favIcon").toggleClass('fa-star-o fa-star');
}

Answer 1

使用jQuery时，您永远不需要使用内联属性eventHandler。

<德尔> onclick=

• 演示1使用jQuery .toggleClass()

• 演示2使用JavaScript .classList.toggle()

• 演示3使用CSS :checked伪类

将v4更新为v5：转到Start | Font Awesome。还有一些课程变化。请参阅演示4 。

演示1 - jQuery

$('button').on('click', fav);

function fav(e) {
  $(this).find('.fa').toggleClass('fa-star-o fa-star');
}

:root {
  font: 400 16px/1.5 Verdana;
}

button {
  display: inline-block;
  font: inherit;
  padding: 0px 5px;
  cursor: pointer;
}

button::after {
  content: ' Favorite'
}

<link href='https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'>

<button>
    <i class="fa fa-star-o"></i>
</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

演示2 - 普通JavaScript

document.querySelector('button').addEventListener('click', fav);

function fav(e) {
  const tgt = e.target.firstElementChild;
  tgt.classList.toggle('fa-star');
  tgt.classList.toggle('fa-star-o');
}

:root {
  font: 400 16px/1.5 Verdana;
}

button {
  display: inline-block;
  font: inherit;
  padding: 0px 5px;
  cursor: pointer;
}

button::after {
  content: ' Favorite'
}

<link href='https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'>

<button>
  <i class="fa fa-star-o"></i>
</button>

演示3 - 纯CSS

:root {
  font: 400 16px/1.5 Verdana;
}

#fav {
  display: none
}

#fav+label {
  display: inline-block;
  border: 2px outset grey;
  padding: 0px 5px;
  cursor: pointer;
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}

#fav+label::after {
  content: ' Favorite'
}

#fav+label>.fa-star-o {
  display: inline-block
}

#fav+label>.fa-star {
  display: none;
}

#fav:checked+label>.fa-star-o {
  display: none;
}

#fav:checked+label>.fa-star {
  display: inline-block
}

<link href='https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'>

<input id='fav' type='checkbox'>
<label for='fav'>
  <i class="fa fa-star-o"></i>
  <i class="fa fa-star"></i>
</label>

演示4 - 字体真棒5

jQuery / JavaScript / CSS

/* #1 jQuery */
$('button.jq').on('click', jQFav);
function jQFav(e) {
  $(this).find('.fa-star').toggleClass('fas far');
}

/* #2 JavaScript */
document.querySelector('button.js').addEventListener('click', JSFav);
function JSFav(e) {
  const tgt = e.target.firstElementChild;
  tgt.classList.toggle('far');
  tgt.classList.toggle('fas');
}

/* #1 JS / #2 jQ */
:root {
  font: 400 16px/1.5 Verdana;
}

button {
  display: inline-block;
  font: inherit;
  padding: 0px 5px;
  cursor: pointer;
}

button::after {
  content: ' Favorite'
}

/* #3 CSS */

#fav {
  display: none
}

#fav+label {
  display:inline-block;
  border: 2px outset grey;
  padding: 0px 5px;
  cursor: pointer;
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}

#fav+label::after {
  content: ' Favorite'
}

#fav+label>.far {
  display: inline-block;
}

#fav+label>.fas {
  display: none;
}

#fav:checked+label>.far {
  display: none;
}

#fav:checked+label>.fas {
  display: inline-block
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" crossorigin="anonymous">

<ol>
<li><fieldset>
<legend>jQuery</legend>

<button class='jq'>
  <i class='fa-star far'></i>
</button>

</fieldset></li>

<li><fieldset>
<legend>Plain JavaScript</legend>

<button class='js'>
  <i class='fa-star far'></i>
</button>

</fieldset></li>

<li><fieldset>
<legend>Pure CSS</legend>

<input id='fav' type='checkbox'>
<label for='fav'>
  <i class="fa-star far"></i>
  <i class="fa-star fas"></i>
</label>

</fieldset></li>
</ol>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

ggplot2是一个jQuery函数，你将它用作JavaScript。试试这个：

.toggleClass()

Answer 3

Difster的回答是正确的。以下是使用本机JavaScript完成相同操作的方法：

document.getElementById("favIcon").classList.toggle('fa-star-o');
document.getElementById("favIcon").classList.toggle('fa-star');

Answer 4

除了Difster所说的，.toggleClass是一个jQuery函数。

除此之外，我不会使用DOM来定义与函数的绑定;使用jQuery的事件监听器系统将允许更易于维护和理解的代码：

  

https://jsfiddle.net/0n1n9o9n/2/

$(document).ready(function() {
  $('#favBtn').on('click', function() {
    $("#favIcon").toggleClass('fa-star-o fa-star');
  });
});

Answer 5

您只能使用Javascript：

 function fav() {
    var icon = document.getElementById("favIcon");
      if (icon.classList.contains("fa-star-o")) {
        icon.classList.remove("fa-star-o");
        icon.classList.add("fa-star");
    } else {
       icon.classList.remove("fa-star");
       icon.classList.add("fa-star-o");
    }
 }

example

Answer 6

我会将我的评论分成多个评论：

1 /正如其他评论中所提到的：@Query(value = "SELECT c.id, c.name FROM Cat c")这是JS和JQuery调用的混合。 如果你想使用纯JS，你可以使用：

$("#favIcon").toggleClass('fa-star-o fa-star');

如果你想使用JQuery，你可以使用（）正如Difster的评论所述：

document.getElementById("favIcon").classList.toggle('fa-star-o');

2 /正如评论中已经提到的，附加事件监听器会更好。

你的小提琴js看起来像这样：

$("#favIcon").toggleClass('fa-star-o');

并删除＆＃34; onClick＆＃34;在HTML上，因为你将附加一个js事件监听器。

检查链接： JQuery toggleClass - js classList

Answer 7

希望有帮助

$('.fa-star').click(function() {
  $(this).toggleClass('fas far');
})

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">


<script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>

 
 
 
 
 
 <i class="far fa-star"></i>