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();

            // ...

Laravel-“收藏夹” /“收藏夹”按钮

1 个答案: