gpt4 book ai didi

javascript - 可以使用 jQuery 在 2 个 FontAwesome 5 图标(常规和实心)之间切换

转载 作者:太空宇宙 更新时间:2023-11-04 07:01:35 25 4
gpt4 key购买 nike

我试图同时切换两个类,一个是 fasfar,另一个是 border-heart 和 selected heart。该代码会在显示常规心形的同时显示另一个实心心形。

var w=1


$('.heart').on('click',function() {
if(w == 1) {
$('.heart').removeClass('far fa-heart').addClass('fas fa-heart');
$('.heart').removeClass('border-heart').addClass('selected-heart');
}
else {
$('.heart').removeClass('fas fa-heart').addClass('far fa-heart');
$('.heart').removeClass('selected-heart').addClass('border-heart');
}
w=1-w;

});
/*I want to toggle the regular heart icon with solid on click and increase its size by 1 px using selected-heart class and removing border-heart*/
.border-heart{
color: red;
font-size: 21px;
}
.selected-heart{
color: red;
font-size: 22px;
}
<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="heart"><i class="far fa-heart border-heart"></i></div>

最佳答案

您必须定位 <i>.heart 内使用 .find() ... 然后只需使用 .toggleClass() 两者的方法 .far.fas类(以及用于更改字体大小的 2 个自定义类)。

;)

$('.heart').on('click',function() {
$(this).find("i").toggleClass("far fas selected-heart border-heart");
});
.border-heart{
color: red;
font-size: 21px;
}
.selected-heart{
color: red;
font-size: 22px;
}
<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="heart"><i class="far fa-heart border-heart"></i></div>

关于javascript - 可以使用 jQuery 在 2 个 FontAwesome 5 图标(常规和实心)之间切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51995844/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com