按钮点击切换字体真棒类 [英] Toggle font awesome class on button click
本文介绍了按钮点击切换字体真棒类的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在这个 jsfiddle 中有代码，我想要字体很棒的图标来使用javascript更改按钮单击，但它似乎无法正常工作。我是javascript的新手，所以请原谅我这是一个愚蠢的问题。
HTML
< button id =favBtnonclick =fav（）;>
< i id =favIconclass =fa fa-star-o>< / i>& nbsp;收藏
< / button>
Javascript
function fav（）{
document.getElementById（favIcon）。toggleClass（'fa-star-o fa-star'）;
}
解决方案
使用jQuery时，你永远不需要使用内联属性eventHandler。
onclick =
onclick = -
演示1使用jQuery
.toggleClass（） -
演示2使用JavaScript
.classList.toggle（） -
演示3使用CSS
：选中伪类
将v4更新为v5：转到开始|字体真棒。还有一些课程变化。参见演示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;填充：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-星）; tgt.classList.toggle（'fa-star-o'）;}
：root {font：400 16px / 1.5 Verdana;} button {display：inline-block; font：inherit;填充：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;边框：2px一开始灰色;填充：0px 5px;游标：指针; -webkit-appearance：button; -moz-appearance：按钮;外观：按钮;} #fav + label :: after {content：'Favorite'} #ef + label> .fa-star-o {display：inline-block} #fav + label> .fa-star {display：none ;}＃fav：checked + label> .fa-star-o {display：none;} #ef：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（远）; tgt.classList.toggle（'fas'）;}
/ *＃1 JS /＃2 jQ * /：root {font：400 16px / 1.5 Verdana;} button {display：inline-block; font：inherit;填充：0px 5px; cursor：pointer;} button :: after {content：'Favorite'} / *＃3 CSS * / #fav {display：none} #fav + label {display：inline-block;边框：2px一开始灰色;填充：0px 5px;游标：指针; -webkit-appearance：button; -moz-appearance：按钮;外观：按钮;} #ef + label :: after {content：'Favorite'} #ef + label> .far {display：inline-block;} #fav + label> .fas {display：none;} #fav：选中+标签> .far {display：none;} #ef：checked + label> .fas {display：inline-block}
< link rel =stylesheethref =https://use.fontawesome.com/releases/v5.8.2/css/all.css\"rossorigin =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>
I have the code as here in this jsfiddle, I want the font awesome icon to change on button click using javascript, but it does'nt seem to work. I'm new to javascript so please forgive me if this was a dumb question.
HTML
<button id="favBtn" onclick="fav();">
<i id="favIcon" class="fa fa-star-o"></i> Favourite
</button>
Javascript
function fav() {
document.getElementById("favIcon").toggleClass('fa-star-o fa-star');
}
解决方案
When using jQuery you never need to use an inline attribute eventHandler.
onclick=
onclick=Demo 1 uses jQuery
.toggleClass()Demo 2 uses JavaScript
.classList.toggle()Demo 3 uses CSS
:checkedpseudo-class
Update v4 to v5: Go to Start | Font Awesome. There are some class changes as well. See 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>
Demo 2 -- Plain 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>
Demo 3 -- Pure 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>
这篇关于按钮点击切换字体真棒类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
