jquery 如何在字体真棒图标之间切换

Question

i want to togggle between to font awesome icons.I have tried

$(document).ready(function () {
     $("#minus").click(function () {
         $("#tog").slideToggle();
         if (  $("#minus").hasClass("fas fa-minus")) {
             $("#minus").addClass("fas fa-plus")
         }else {
             $("#minus").addClass("fas fa-minus")
         }
     })
})

 $("#minus").click(function () {
         $("#tog").slideToggle();
         $("#minus").toggleClass("fas fa-plus")

     })
})

$(document).ready(function () {
     $("#minus").click(function () {
         $("#tog").slideToggle();
         if (  $("#minus").hasClass("fas fa-minus")) {
             $("#minus").addClass("fas fa-plus")
         }else {
             $("#minus").removeClass("fas fa-plus")
         }
     })
})

but neither of the codes above works.How can i toogle between the two different icons

Answer 1

Looks like you are adding new class but not removing the previous class when adding a new class so the element displays the icon class of which comes last in the stylsheet.

     $("#minus").click(function () {
         $("#tog").slideToggle();
         if (  $("#minus").hasClass("fas fa-minus")) {
             $("#minus").addClass("fa-plus").removeClass('fa-minus')
         }else {
             $("#minus").addClass("fa-minus").removeClass('fa-plus')
         }
     })

Answer 2

A better implementation would be using .toggleClass() :

 $(document).ready(function () { $("#minus").click(function () { $("#minus").toggleClass( "fa-minus" ); $("#minus").toggleClass( "fa-plus" ); }) })

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <i id="minus" class="fa fa-minus fa-2x" aria-hidden="true"></i>