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')

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

1 个答案: