javascript - Laravel - 收藏/取消收藏按钮

Question

我正在尝试为项目创建一个收藏/不收藏按钮。该按钮需要是可切换的，以便当用户第一次单击它时，该项目会被添加到收藏夹中，下次单击它时，该项目应该被取消收藏。它还应该记住用户已经收藏的所有项目并以不同的方式显示按钮。

这是我目前拥有的内容，我循环遍历所有项目并显示删除或添加按钮，具体取决于他们是否收藏了该项目:

 @foreach($items as $item)
    @if($item->isFavourited)
    <button id="deletefavourite{{$item->id}}" onClick="deleteFromFavourites({{$item->id}}, {{ Auth::user()->id }})" name="addfavourite" class="btn btn-lg"><i class="fas fa-heartbeat"></i></button>
    @else
    <button id="addfavourites{{$item->id}}" onClick="addToFavourites({{$item->id}}, {{ Auth::user()->id }})" name="deletefavourite" class="btn btn-lg"><i class="fas fa-heart" ></i></button>
    @endif
@endforeach

我的 Javascript 函数使用 AJAX 请求添加/删除收藏夹项目:

   function addToFavourites(itemid, userid) {
        var user_id = userid;
        var item_id = itemid;

        $.ajax({
            type: 'post',
            url: 'api/addfavourite',
            data: {
                'user_id': user_id,
                'item_id': item_id,
            },
            success: function () {
                $('#addfavourites' + item_id).css({
                    'color': '#ad1707'
                });
            },
            error: function (XMLHttpRequest) {
                // handle error
            }
        });
    }

Function deleteFromFavourites is the same, but just doing a DELETE ajax 
request to remove the item

问题是，除非我刷新页面，否则该按钮不会在收藏夹和不收藏夹之间切换。我怎样才能做到这一点而无需刷新页面？

Answer 1

PHP 是服务器端代码，因此它在离开服务器之前就已完全呈现。这意味着客户端计算机上永远不存在另一个按钮。

您可以允许将两个按钮发送到客户端，但首先使用 CSS 将其中一个按钮隐藏起来。

@foreach($items as $item)

    <!-- set color and hide if not favourited -->
    <button id="deletefavourite{{$item->id}}" 
            onClick="deleteFromFavourites({{$item->id}}, {{ Auth::user()->id }})" 
            name="addfavourite" 
            class="btn btn-lg"
            style="color: #ad1707; {{ $item->isFavourited ? '' : 'display: none;' }}">
        <i class="fas fa-heartbeat"></i>
    </button>

    <!-- hide if favourited -->
    <button id="addfavourites{{$item->id}}" 
            onClick="addToFavourites({{$item->id}}, {{ Auth::user()->id }})" 
            name="deletefavourite" 
            class="btn btn-lg"
            style="{{ $item->isFavourited ? 'display: none;' : '' }}">
        <i class="fas fa-heart" ></i>
    </button>

@endforeach

然后在 JavaScript 中，您可以在进行更改时显示或隐藏按钮。

function addToFavourites(itemid, userid) {
    var user_id = userid;
    var item_id = itemid;

    $.ajax({
        type: 'post',
        url: 'api/addfavourite',
        data: {
            'user_id': user_id,
            'item_id': item_id,
        },
        success: function () {
            // hide add button
            $('#addfavourites' + item_id).hide();
            // show delete button
            $('#deletefavourite' + item_id).show();
        },
        error: function (XMLHttpRequest) {
            // handle error
        }
    });
}

// and so on for the other function


            // ...

            // show add button
            $('#addfavourites' + item_id).show();
            // hide delete button
            $('#deletefavourite' + item_id).hide();

            // ...