我在数据库中的列状态为布尔值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] 删除。
我来说两句