在点击按钮时切换字体类
在点击按钮时切换字体类
提问于 2017-07-22 03:23:52
我有这里的代码，在这里的jsfiddle，我想字体可怕的图标改变按钮点击使用javascript，但它似乎不工作。我是javascript的新手，所以如果这是一个愚蠢的问题，请原谅。
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');
}回答 5
Stack Overflow用户
发布于 2017-07-22 03:26:20
.toggleClass()是一个jQuery函数，您可以将其用作JavaScript。试试这个：
$("#favIcon").toggleClass('fa-star-o fa-star');Stack Overflow用户
发布于 2017-07-22 03:34:50
Difster的回答是正确的。下面是如何使用原生JavaScript完成相同的任务：
document.getElementById("favIcon").classList.toggle('fa-star-o');
document.getElementById("favIcon").classList.toggle('fa-star');Stack Overflow用户
发布于 2017-07-22 04:19:00
我会将我的评论分成多个评论：
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/正如评论中已经提到的，最好附加一个事件侦听器。
你的提琴js应该是这样的：
document.getElementById("favBtn").addEventListener("click", fav);
function fav() {
document.getElementById("favIcon").classList.toggle('fa-star-o');
document.getElementById("favIcon").classList.toggle('fa-star');
}并删除超文本标记语言中的"onClick“，因为您将附加一个js事件侦听器。
链接到检查：JQuery toggleClass - js classList
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45245301
复制相关文章
相似问题