如何更改字体真棒图标和按钮类 onclick？

Question

如何更改按钮类和字体真棒图标 onclick？ 当我点击按钮时，类和图标应该改变，反之亦然。

<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类始终存在于元素上，因此它们可以从您的逻辑中删除。 所有的，那么你需要做的就是切换的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')