jquery - 如何使用 jquery ajax 根据 laravel 中的数据库值 0 或 1 更改按钮类和 fontawesome 图标？

Question

我在数据库中有列状态， bool 值为 0 和 1。0 表示显示用户，1 表示隐藏用户。

这是我的按钮

 <button class="btn btn-info btn-sm btn_show" type="button" id="btn_show" data-value="{{$user->status}}" data-id="{{$user->id}}"><i
                                            class="fa fa-eye"></i>
                                </button>

我的 Controller

 public function userhideandshow($id)
{
    $user = User::find($id);
    if ($user->status == 0) {
        $user->status = 1;
    } else {
        $user->status = 0;
    }
    $user->save();

    return response()->json(['success']);
}

Ajax 调用

$(function () {
        $(".btn_show").click(function () {
            let status = $(this).data('value');
            console.log(value);
            let id = $(this).data('id');
            $.ajax({
                url: "/user/" + id,
                method: "POST",
                data: {'id': id, 'status': value},
                dataType: "json",
                success: function (data) {
                    console.log(value);
                    if (value == 0) {
                        $("button.btn_show").find("i").removeClass("fa fa-eye").addClass("fa fa-eye-slash");
                    } else {
                        $("button.btn_show").find("i").removeClass("fa fa-eye-slash").addClass("fa fa-eye");
                    }
                },
            });
        });
    });

当我单击按钮时，我想根据我的数据库值更改其类和图标。如果值为 0，则按钮为主，图标为 fa fa-eye，如果为 1，则 fa fa-eye 斜杠和按钮信息。数据库值正在更改，但如何根据值更改按钮。提前致谢。

我的需求是这个

 @if($user->status == 0)
    <button type="button" id="btn_show" data-value="{{ $user->status }}" data-id="{{$user->id}}" class="btn btn-primary btn-sm btn_show"><i
                    class="fa fa-eye"></i>
        </button>
  @else
    <button type="button" id="btn_show" data-value="{{$user->status}}" data-id="{{$user->id}}" class="btn btn-info btn-sm btn_show"><i
                    class="fa fa-eye-slash"></i>
        </button>
@endif

Answer 1

您需要将类设置为当前单击的按钮，所以试试这个

$(".btn_show").click(function () {
    let this_button = $(this);
    let this_button_icon = $(this).find("i"); // Add this to have current button icon instance
    let status = $(this).data('value');
    console.log(value);
    let id = $(this).data('id');
    $.ajax({
        url: "/user/" + id,
        method: "POST",
        data: {'id': id, 'status': value},
        dataType: "json",
        success: function (data) {
        console.log(value);
        // set class to icon
        if (value == 0) {
        this_button_icon.removeClass("fa fa-eye").addClass("fa fa-eye-slash");
        this_button.attr('data-user-id', 1);
        } else {
            this_button_icon.removeClass("fa fa-eye-slash").addClass("fa fa-eye");
            this_button.attr('data-user-id', 0);
        }
    },
});

已编辑:试试这个

<button type="button" id="btn_show{{$user->id}}" data-value="{{$user->status}}" data-id="{{$user->id}}" class="btn btn-sm btn_show {{$user->status ? 'btn-info' : 'btn-primary'}}"><i
                class="fa {{$user->status ? 'fa-eye-slash' : 'fa-eye'}}"></i>
    </button>