Laravel心愿单操作后即时显示红心问题求助

1. 修复控制器返回数据 #

控制器需要返回操作后的心愿单状态（是否已加入），让前端明确知道要切换到哪种状态。修改post_wishlist方法的返回逻辑：

public function post_wishlist(Request $request)
{
    if ($request->ajax()) {
        $data = $request->all();
        $pid = $data['product_id'];
        $userid = $data['user_id'];

        $wishlistExists = DB::table('wishlist')
            ->where('pid', $pid)
            ->where('userid', $userid)
            ->exists();

        if ($wishlistExists) {
            DB::table('wishlist')
                ->where('pid', $pid)
                ->where('userid', $userid)
                ->delete();
        } else {
            DB::table('wishlist')->insertOrIgnore([
                'pid' => $pid,
                'userid' => $userid,
            ]);
        }

        // 返回操作后的心愿单状态
        $newStatus = !$wishlistExists;
        return response()->json(['success' => true, 'inWishlist' => $newStatus]);
    }
}

2. 修正前端AJAX逻辑 #

前端存在参数拼写错误、未正确绑定当前点击元素、未同步修改图标颜色的问题，修改后的AJAX代码：

<script>
    var user_id = {{ Auth::id() }};
    $(document).ready(function(){
        $('.addtowishlist').click(function()
        {
            // 保存当前点击的元素，避免上下文丢失
            var $this = $(this);
            $.ajaxSetup({
                headers:{
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            });
            var product_id = $this.data('productid');
            $.ajax({
                type:'POST',
                url:'/post_wishlist',
                data:{
                    product_id:product_id,
                    user_id:user_id
                },
                success:function(response){
                    // 切换外层a标签的状态类
                    $this.toggleClass('wishlist-added', response.inWishlist);
                    // 修改内部心形图标的颜色
                    var $icon = $this.find('.addtowishliststyle');
                    $icon.css('color', response.inWishlist ? '#8B0000' : 'white');
                }
            })
        });
    });
</script>

3. 修复页面元素ID冲突 #

当前页面中，心愿单的<a>标签使用了重复的id="addtowishlist"（多商品场景下），会导致JS事件绑定异常，需移除该ID属性：

<a href="#" class="addtowishlist {{ ($productdata->inWishlist ? 'wishlist-added' : '') }}" data-productid="{{ $productdata->id }}">
    <i class="fa fa-heart fa-2x addtowishliststyle" aria-hidden="true" style="color: {{ ($productdata->inWishlist ? '#8B0000' : 'white') }}"></i>
</a>

内容的提问来源于stack exchange，提问作者Meera