开发者问题收集

单击按钮时切换 Font Awesome 类

2017-07-21
17215
javascript jquery html font-awesome

我有 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');
}
3个回答

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

onclick=

  • 演示 1 使用 jQuery .toggleClass()

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

  • 演示 3 使用 CSS :checked 伪类

将 v4 更新至 v5： 转到 开始 | 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 -- 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>
zer00ne
2017-07-21

.toggleClass() 是一个 jQuery 函数，您正在将其用作 JavaScript。尝试此操作： 

$("#favIcon").toggleClass('fa-star-o fa-star');
Difster
2017-07-21

Difster 的回答是正确的。以下是使用原生 JavaScript 实现相同功能的方法： 

document.getElementById("favIcon").classList.toggle('fa-star-o');
document.getElementById("favIcon").classList.toggle('fa-star');
kmaz13
2017-07-21