Изменить значок при нажатии

Question

Я создаю кнопку переключения и помещаю в нее стрелку, но я хочу, чтобы при нажатии на кнопку стрелка менялась.Я использую шрифт, чтобы поставить эти стрелки, поэтому мне просто нужно изменить fa-chevron-right на fa-chevron-down при клике.

Я пробовал это, но это не работает.

 <button class="btn btn-warning btn-receita offset-lg-2" id="btn-receitamob" data-clicked-times="0"> CLIQUE AQUI PARA VER A RECEITA <span id="span-circle"> <i class="fas fa-chevron-right" id="seta"></i> </span>                      </button>

<div id="receita-div" style="display: none;" class="receita-hidden">
--content




<script> 
    $( "#btn-receitamob" ).click(function() {
        $("#receita-div").slideToggle(1500);
    });
</script> 
<script>
    $("#btn-receitamob").click(function() {
        $('.fa-chevron-right').removeClass(".fa-chevron-right").addClass(".fa-chevron-down"); //Adds 'a', removes 'b'

    }, function() {
        $('.fa-chevron-right').removeClass(".fa-chevron-down").addClass(".fa-chevron-right"); //Adds 'b', removes 'a'

    });
</script>

Answer 1

Как сказал Гурурасад Рао, удалите точку на именах классов "fa-chaveron-down" и "fa-chaveron-right"

Answer 2

your .slideToggle (1500) означает: анимация слайда длится 1 с половиной секунды.Следовательно, вам нужно запустить свой переключающий класс в полном обратном вызове.

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

$( "#btn-receitamob" ).click(function() {
  $("#receita-div").slideToggle(1500, function () {
      // 
      //  if you want to toogle at the eend of animation
      //
      //$("#btn-receitamob i").toggleClass("fa-chevron-right fa-chevron-down");
  });
  
  //
  // if you want to toogle the icon right in time
  //
  $(this).find("i").toggleClass("fa-chevron-right fa-chevron-down");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">


<button class="btn btn-warning btn-receita offset-lg-2" id="btn-receitamob" data-clicked-times="0"> CLIQUE AQUI PARA VER
    A RECEITA <span id="span-circle"> <i class="fas fa-chevron-right" id="seta"></i> </span></button>

<div id="receita-div" style="display: none;" class="receita-hidden">
    --content
</div>

Answer 3

То, что я хотел бы предложить, это иметь общий класс и переключать его правый и нижний класс.Пример ниже:

Например, я добавлю класс icon к элементу, который имеет элемент fa-cheveron-right.Тогда я получу к нему доступ, как показано ниже:

<script> 
    $( "#btn-receitamob" ).click(function() {
        $("#receita-div").slideToggle(1500);
        $(this).find(".icon").toggleClass('fa-cheveron-right fa-chevron-down');
    });
</script>