как переключаться между шрифтом удивительные иконки jquery - PullRequest
Новая
       10

как переключаться между шрифтом удивительные иконки jquery

1 голос
/ 18 марта 2020

Я хочу переключиться между шрифтами. Значки. Я попробовал 

$(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")
         }
     })
})

, но ни один из приведенных выше кодов не работает. Как переключиться между двумя различными значками

Ответы [ 2 ]

1 голос
/ 18 марта 2020

Лучшая реализация будет использовать .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>
1 голос
/ 18 марта 2020

Похоже, что вы добавляете новый класс, но не удаляете предыдущий класс при добавлении нового класса, поэтому элемент отображает класс значков, который стоит последним в таблице стилей. 

     $("#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')
         }
     })
...