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

Question

我试图同时切换两个类，一个是 fas 和 far，另一个是 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>

Answer 1

您必须定位 <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>