Как мне изменить шрифт, классную иконку и класс кнопок на клик?

Question

Как поменять класс кнопки и шрифт-офигенный значок при клике? Когда я нажимаю на кнопку, класс и значок должны быть изменены, и наоборот.

<button type="button" id="btn_hideshow" data-id="{{$user->id}}" class="btn btn-primary btn-sm btn_hideshow">
  <i class="fa fa-eye"></i>
</button>

$(function() {
  $(".btn_hideshow").click(function() {
    let id = $(this).data('id');
    $.ajax({
      url: "/user-hide-show/" + id,
      method: "POST",
      data: {
        'id': id
      },
      dataType: "json",
      success: function(data) {
        if ($("button#btn_hideshow").hasClass() == "btn btn-primary btn-sm") {
          $("button#btn_hideshow").removeClass("btn btn-primary btn-sm").addClass("btn btn-info btn-sm")
            .append().html("<i class='fa fa-eye-slash'><i/>")
        } else {
          $("button#hideAndShow").removeClass("btn btn-info btn-sm").addClass("btn btn-primary btn-sm").append().html("<i class='fa fa-eye'><i/>")
        }
      }
    });
  });
});

Answer 1

Если ваш AJAX вызов работает, значит, проблема в операторе if. hasClass() возвращает логическое значение, но вы пытаетесь сравнить его со строкой класса для поиска. Вместо этого необходимо указать строку в качестве аргумента функции, например:

if ($("button#btn_hideshow").hasClass("btn-primary") {   

При этом существует лучший способ сделать то, что вам нужно.

Как btn и btn-sm классы всегда присутствуют в элементе, который они могут быть удалены из вашей логики c. Все, что вам нужно сделать, это переключить классы btn-primary и btn-info на button. Точно так же дочерний элемент <i> можно сохранить вместо удаления / повторного добавления, а классы fa-eye и fa-eye-slash можно переключать. Таким образом, попробуйте это:

// outside AJAX callback:
let $button = $("#btn_hideshow");

// inside AJAX callback:
$button.toggleClass('btn-primary btn-info').find('i').toggleClass('fa-eye-slash fa-eye')