点击按钮时切换字体awesome类

Question

点击按钮时切换字体awesome类

7

我在这个jsfiddle中有如下代码，我想使用javascript在按钮点击时更改Font Awesome图标，但似乎无法实现。由于我是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');
}

- Ishan Dragenox

7个回答

6

.toggleClass()是jQuery函数，而你正在将其用作JavaScript。请尝试以下代码：

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

- Difster

3

Difster的回答是正确的。以下是使用本地JavaScript实现相同效果的方法：

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

- kmaz13

1

此外，正如Difster所说，.toggleClass是jQuery函数。

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

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

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

- Aleksandar Misich

0

希望能有所帮助

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

- Seth

0

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

1/ 如其他评论所述：$("#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/ 如评论中已经提到的，最好附加一个事件监听器。

您的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

- Redirod

-1

你只能使用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");
    }
 }

示例

- YoliE

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- zer00ne · Accepted Answer

使用jQuery时，您永远不需要使用内联属性事件处理程序。

`onclick=`

Demo 1使用jQuery的.toggleClass()
Demo 2使用JavaScript的.classList.toggle()
Demo 3使用CSS的:checked伪类

更新v4至v5：前往Start | Font Awesome。还有一些类更改。请参见Demo 4。

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