如何使用jquery ajax在laravel中基于数据库值0或1更改按钮类和fontawesome图标?

o

我在数据库中的列状态为布尔值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']);
}

阿贾克斯电话

$(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");
                    }
                },
            });
        });
    });

当我单击按钮时,我想根据数据库值更改其类和图标。如果value为0,则按钮为主要按钮,图标为fa-eye;如果为1,则为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

鲁宾·丹尼尔扬

您需要将类设置为当前单击的按钮,因此请尝试此操作

$(".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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

AJAX如何更改基于数据库的选择值

如何使用 jquery/ajax 将值插入数据库?

如何使用laravel通过jquery ajax将表单值插入数据库?

如何使用 php、ajax 和 jquery 从数据库中将设置值调用到 <label> 中

如何使用Jquery和Ajax将Json数据发送到数据库中?

不刷新页面如何使用ajax / jQuery显示数据库中的值

如何使用 ajax 和 jquery 从我的数据库中检索记录?

如何使用PHP更改数据库onclick按钮中的字段值

如何使用基于索引的jQuery更改类?

如何使用VB.NET在ASP.NET中基于数据库布尔字段更改按钮背景色?

如何使用Jquery更改Button名称而不更改fontawesome图标

如何根据Spinner从Android中的数据库中获取数据来更改按钮的值?

如何使用Jquery或Ajax从数据库加载更多内容

如何使用$和jQuery

如何使用Jquery ajax和php将数据插入mysql数据库?

如何使用jQuery Ajax传递表单数据以在数据库中插入数据?

如何使用 Ajax Jquery,php 将数据插入到数据库中

如何使用jQuery获取和更改值

如何使用jQuery在数据库中创建表

如何使用 PHP 数据库中的数据向基于 JavaScript 的表添加按钮?

如何基于搜索到的值从jtable和sql数据库中删除搜索到的行

如何使用php和mysql将创建的行值上的多个jquery插入数据库中?

使用 Jquery 更改 Fontawesome 图标

如何使用CSS和jquery隐藏具有数据库值的表?

如果使用AJAX或XMLHttprequest值大于0,则将数据保存到MySQL数据库中

如何使用oracle数据库中的值验证密码,以及java中return 0和return 1有什么区别

如何使用JQuery Ajax更改文本框中的值?

如何使用 jquery 和 codeigniter 在 foreach 中获取按钮值?

无法使用 jQuery Ajax Bootstrap 模型从数据库中获取更新数据的值 - json 数据