我正在建立一个大学社交网络,其中将包含一些脚本和容易找到的工作。到现在为止,我一直关注Academind的Maximilian的教程,我需要更改likes函数才能与我的新设计一起使用。我想对ajax实时使用“喜欢”和“不喜欢”,并提交一个,我想更改图标的颜色。
也花费了一整天的时间来尝试针对喜欢和不喜欢的对象实施计数器,但从未真正实现它的实时性。
PostController.php
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<a class="navbar-brand" href="Home">
<img src="https://i.imgur.com/hTiYNNe.png" width="53" height="35" class="d-inline-block align-top ml-2" alt="">
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
app.js
......
public function postLikePost(Request $request)
{
$post_id = $request['postId'];
$is_like = $request['isLike'] === 'true';
$update = false;
$post = Post::find($post_id);
if (!$post) {
return null;
}
$user = Auth::user();
$like = $user->likes()->where('post_id', $post_id)->first();
if ($like) {
$already_like = $like->like;
$update = true;
if ($already_like == $is_like) {
$like->delete();
return null;
}
} else {
$like = new Like();
}
$like->like = $is_like;
$like->user_id = $user->id;
$like->post_id = $post->id;
if ($update) {
$like->update();
} else {
$like->save();
}
return null;
}
Dashboard.blade.php
var postId = 0;
var postBodyElement = null;
.....
$('.like').on('click', function(event) {
event.preventDefault();
postId = event.target.parentNode.parentNode.dataset['postid'];
var isLike = event.target.previousElementSibling == null;
$.ajax({
method: 'POST',
url: urlLike,
data: {isLike: isLike, postId: postId, _token: token}
})
.done(function() {
event.target.innerText = isLike ? event.target.innerText == 'Like' ? 'You like this post' : 'Like' : event.target.innerText == 'Dislike' ? 'You don\'t like this post' : 'Dislike';
if (isLike) {
event.target.nextElementSibling.innerText = 'Dislike';
} else {
event.target.previousElementSibling.innerText = 'Like';
}
});
});
我希望有人可以指导我或回答我遇到的“简单”问题。