按钮点击切换字体真棒类

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伪类

演示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>

Answer 2

.toggleClass()是一个jQuery函数,你将它用作JavaScript.试试这个:

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