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

Question

I was trying to toggle two classes simultaneously one fas and far and another border-heart and selected heart. The code results in the display of another solid heart along with the regular one.

 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

You have to target the <i> within .heart using .find() ... Then simply use the .toggleClass() method on both .far and .fas classes (and the 2 custom classes you have for font-size change).

;)

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

Answer 2

I think this is a quick fix. It looks like you're trying to toggle between two classes, however, you have selected the parent of the item you actually want. You are selecting the .heart div, but you actually want to be selecting the i element within. You should modify your jquery to the following;

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;  
});