Laravel AJAX显示/隐藏按钮响应

Question

我创建了一个AJAX请求按钮点击事件，该事件将模型字段更新为true或false，以便将模型记录标记为喜欢或不喜欢。

上下文：

• 当用户访问视图时，它必须显示一个或其他按钮，这取决于记录是否具有点赞或未点赞标记

• 当用户访问视图时，他将有多个记录，他可以喜欢或不喜欢其中的任何一个，因此需要发布AJAX请求，并在相应的HTML元素中为该模型记录显示/隐藏正确的按钮。

• HTML代码(这只是一个记录实例，实际视图可以根据模型记录数量有多个该代码实例(

<div class="kt-portlet__head-toolbar">
<a href="#" class="btn btn-icon" data-toggle="dropdown" onClick="likeProperty({{$match->matchid}})">
{{$match->matchid}}
@if ($match->prop_like == true)
<i class="flaticon2-bell kt-font-brand likeprop" id="likeprop" name="likeprop"></i>
@endif
@if ($match->prop_like == false)
<i class="flaticon2-bell-4 kt-font-brand unlikeprop" id="unlikeprop" name="unlikeprop"></i>
@endif
</a>
</div>

• Javascript代码

function likeProperty(matchid) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
method: 'post',
url: '/processes/offerdemand/matchlike/'+ matchid,
data: {
'id': matchid,
},
success: function () {
// hide like button
$('#likeprop').hide();
// show like button
$('#unlikeprop').show();
},
error: function (XMLHttpRequest) {
// handle error
}
});
}

有人知道这种要求吗？

问候

Answer 1

如果我理解正确的话，您遇到的问题是像prop和unlikeprop这样的html id不是唯一的。

这个问题的最快解决方案是将记录id附加到id上，使它们是唯一的。例如

<i class="flaticon2-bell-4 kt-font-brand unlikeprop" id="unlikeprop-{{ $match->id }}" name="unlikeprop-{{ $match->id }}"></i>

和

$('#unlikeprop-'+matchid).show();

像这样混淆id是有效的，但可能会变得混乱，并导致容易的错误。更现代的javascript框架，如angular、react和vue.js，试图通过引入双向数据绑定等概念来解决其中的一些问题。从长远来看，您可能会考虑研究vue.jshttps://laravel.com/docs/7.x/frontend#writing-vue组件。