在按钮单击时切换字体真棒类

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()

• Demo 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>

Demo 4 -- Font Awesome 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

.toggleClass() 是一个 jQuery 函数，您将它用作 JavaScript。试试这个：

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

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

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

1/ 如其他 cmets 所述：$("#favIcon").toggleClass('fa-star-o fa-star'); 这是 JS 和 JQuery 调用的混合。 如果你想使用纯 JS，你会使用：

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

如果你想使用 JQuery 可以使用 () 就像在 Difster 的评论中提到的那样：

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

2/ 正如 cmets 中已经提到的，最好附加一个事件侦听器。

你的 Fiddle js 看起来像这样：

document.getElementById("favBtn").addEventListener("click", fav);
function fav() {
    document.getElementById("favIcon").classList.toggle('fa-star-o');
    document.getElementById("favIcon").classList.toggle('fa-star');
}

并删除 HTML 上的“onClick”，因为您将附加一个 js 事件侦听器。

要检查的链接： JQuery toggleClass - js classList

Answer 6

希望对你有帮助

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

Answer 7

您只能使用 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