页面重新加载后如何保持收藏/不喜欢的按钮颜色?

Question

我正在做一个Laravel项目，用户可以在其中收藏和不喜欢的书籍，当用户单击收藏夹按钮时，颜色变为红色，再次单击时颜色恢复为灰色，在两种情况下，数据库成功更改而无需重新加载页面，因为我使用了ajax，但现在的问题是当我刷新页面时， 按钮恢复为灰色。

这是我的观点代码： 我删除了大多数 HTML 代码

@foreach( $books as $book)
<div class="mb-3">
<span class="badge badge-pill badge-primary p-2 mr-4">
<span class="count_of_book">{{ $book-> amount }}</span>
copies available
</span>
<i id="favorite" data-bookid="{{ $book-> id }}"  class="fas fa-heart fa-2x"></i>
</div>
</div>
@endforeach
// ajax link      
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var token = '{{ Session::token()}}';
var urlFav = '{{ route('favor') }}';
</script>

和 js 的代码：

$(".fa-heart").on("click", function (event){
bookid = $(this).data("bookid");
$.ajax({
method: 'POST',
data: {bookid: bookid , _token:token},
success: function(data){
if(data.is_fav == 1){
$(event.target).toggleClass('heart-active');
}
if(data.is_fav == 0){
$(event.target).addClass('text-dark');
}
}
});

以及控制器上的 PHP 代码：

public function bookFavBook(Request $request){
$book_id = $request['bookid'];
$fav = DB::table('favorites')
->where('book_id', $book_id)
->where('user_id', Auth::user()->id)
->first();
if(!$fav){
$newfav = new Favorite;
$newfav->book_id =$book_id; 
$newfav->user_id = Auth::user()->id;
$newfav->fav = 1;
$newfav->save();
$is_fav = 1;
}
elseif ($fav->fav == 1){
DB::table('favorites')
->where('book_id', $book_id)
->where('user_id', Auth::user()->id)
->delete();
$is_fav = 0;
}
elseif ($fav->fav == 0){
DB::table('favorites')
->where('book_id', $book_id)
->where('user_id', Auth::user()->id)
->update(['fav'=> 1] );
$is_fav = 1;
}
$response = array(
'is_fav'=>$is_fav,
);
return response()->json($response, 200);
} 
}

最后使用的路线：

Route::post('/favor', [ 'uses'=>'BookController@bookFavBook','as'=>'favor']);

请任何人都可以提供帮助，我只想保持按钮颜色，即使在页面重新加载和每次用户登录后也是如此。 谢谢

Answer 1

您需要获取最喜欢的书籍列表并循环浏览列表以与书籍进行比较。下面的代码给你的想法，

@foreach( $books as $book)
@foreach($favBooks as $fav) // Pass Favorite books list from controller.
<div class="mb-3">
<span class="badge badge-pill badge-primary p-2 mr-4">
<span class="count_of_book">{{ $book-> amount }}</span>
copies available
</span>
<i id="favorite" data-bookid="{{ $book-> id }}" class="fas fa-heart fa-2x {{ $fav->bookid == $book->id ? 'heart-active' : 'text-dark'}}"></i>
</div>
@endforeach
@endforeach