Как я могу изменить класс кнопки и значок fontawesome, основываясь на значении моей базы данных 0 или 1 в laravel с использованием jquery ajax?

Question

У меня есть состояние столбца в базе данных с логическим значением 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>

Мой контроллер

 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 sla sh и информация о кнопке. Значение базы данных меняется, но как мне изменить кнопку в зависимости от значения. Заранее спасибо.

Мне нужно это

 @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>