作者：乌鸦晕倒_767 | 来源：互联网 | 2023-01-28 20:15
我有这个jsfiddle的代码,我希望字体真棒图标更改按钮单击使用Javascript,但它似乎似乎没有工作.我是Javascript的新手所以请原谅我,如果这是一个愚蠢的问题.
HTML
使用Javascript
function fav() {
document.getElementById("favIcon").toggleClass('fa-star-o fa-star');
}
zer00ne..
13
使用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'
}
演示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'
}
演示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
}
1> zer00ne..：
使用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'
}
2> Difster..：
.toggleClass()是一个jQuery函数,你将它用作Javascript.试试这个:
$("#favIcon").toggleClass('fa-star-o fa-star');
京公网安备 11010802041100号