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

页面重新加载后如何保持收藏夹/收藏夹按钮的颜色？

1 个答案: