javascript - Laravel 无限滚动分页(x)与 Like 系统 - Over x post like/unlike 不起作用但如果 post id <= x 则有效
问题描述
我还是 laravel 的新手,我正在创建一个“社交页面”,你可以在其中发布帖子,你可以喜欢它们 ->paginate(12)
我的笔记有一个点赞按钮,但仅在前 12 个笔记上有效。在接下来的 12 个音符加载后,第 13 个或更高的音符不起作用。它卡在白页中,URL 变为localhost/note/like
? 当我尝试喜欢或不喜欢时。
查看.php:
<input type="hidden" id="note-id-js" value="{{ $note->id }}">
@if(isset(Auth::user()->id))
<button type="submit" class="btn --transparent">
<svg class="icon icon-like {{ $note->isLikedByAuthUser() ? '--fill' : '' }}">
<use xlink:href="#icon-like"></use>
</svg>
</button>
<span id="count-js">{{ $note->likes->count() }}</span>
@endif
@guest
<svg class="icon icon-like disabled">
<use xlink:href="#icon-like"></use>
</svg>
<span id="count-js">{{ $note->likes->count() }}</span>
@endguest
</form>
像.js:
'use strict';
var forms = document.querySelectorAll('#form-js');
//window.addEventListener('scroll', (e) => {
// forms = document.querySelectorAll('#form-js');
// console.log(forms);
//});
forms.forEach( form => {
form.addEventListener('submit', function(e) {
e.preventDefault();
const url = e.currentTarget.getAttribute('action');
const token = document.querySelector('meta[name="csrf-token"]').content;
const noteId = e.currentTarget.querySelector('#note-id-js').value;
const count = e.currentTarget.querySelector('#count-js');
const heart = e.currentTarget.querySelector('.icon-like');
fetch(url, {
headers: {
'Content-Type' : 'application/json',
'X-CSRF-TOKEN' : token
},
method: 'post',
body: JSON.stringify({
id: noteId
})
}).then(response =>{
response.json().then(data => {
count.innerHTML = data.count;
heart.classList.toggle('--fill');
});
}).catch(error =>{
console.log(error);
});
});
});
帖子控制器:
public function like():JsonResponse
{
$note = Note::find(request()->id);
if ($note->isLikedByAuthUser()){
$res =Like::where([
'user_id' => auth()->user()->id,
'note_id' => request()->id
])->delete();
if ($res){
return response()->json([
'count' => Note::find(request()->id)->likes->count()
]);
}
}
else{
$like = new Like();
$like->user_id = auth()->user()->id;
$like->note_id = request()->id;
$like->save();
return response()->json([
'count' => Note::find(request()->id)->likes->count()
]);
}
}
网页.php:
Route::post('/note/like', [NotesController::class, 'like'])->name('notes.like');
我知道一开始只有 12 条笔记存在,我必须检查有多少条笔记可供我的 AJAX 考虑,但是当我尝试window.addEventListener('scroll', ...
并更新时forms = document.querySelectorAll('#form-js');
,它没有任何效果。
您对如何解决此问题有任何建议吗?
解决方案
推荐阅读
- javascript - 承诺有两个嵌套 Javascript 的 for 循环
- python-3.x - 是否可以在 pypi 包中提供持久数据?
- point-cloud-library - 无法关闭 PCL 可视化工具
- visual-studio - 我的开发人员命令提示符构建脚本停止 @echo-ing
- recaptcha - recaptcha 验证响应中时间戳的用途
- java - 为什么程序不能通过这些断言?
- javascript - 打字稿拒绝不符合接口的属性
- javascript - 有没有办法在对象数组中获得一定百分比的唯一性?
- android - C++ 库导致原生 Android 崩溃
- c# - ASP.Net Core 自定义绝对根路径