Question

我试图同时切换两个类，一个是fas和far，另一个是边界心和选定的心。该代码将显示另一颗坚实的心脏以及正常的心脏。

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>

Answer 1

您必须使用.find()在<i>中定位.heart，然后在.far和{{1}上同时使用.toggleClass()方法}类（以及用于更改字体大小的2个自定义类）。

;）

.fas

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

Answer 2

我认为这是一个快速解决方案。看起来您正在尝试在两个类之间切换，但是，您已经选择了想要的项目的父项。您正在选择.heart div，但实际上您想在其中选择i元素。您应该将jquery修改为以下内容；

var w=1


$('.heart').on('click',function() {
    if(w == 1) {
        //standard CSS selector selecting the child i element from the .heart element
        $('.heart i').removeClass('fas fa-heart').addClass('fa fa-heart');
    }
    else {
        $('.heart i').removeClass('fa fa-heart').addClass('fas fa-heart');
    }
    w=w-1;  
});

可以使用jQuery在2个FontAwesome 5个图标（常规和实心）之间切换

2 个答案: