jquery - 如何更改字体很棒的图标和按钮类 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()返回一个 bool 值，但您试图将其与要搜索的类字符串进行比较。相反，需要将字符串作为函数的参数提供，例如:

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

话虽这么说，有一种更好的方法可以满足您的要求。

作为btn和btn-sm类始终存在于元素上，它们可以从您的逻辑中删除。然后您需要做的就是切换 btn-primary和btn-info button 上的类(class)。同样的 child <i>可以保留元素而不是删除/重新添加元素，并且 fa-eye和fa-eye-slash类(class)可以切换。因此，请尝试以下操作:

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

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