php - 如何在用户使用ajax取消关注时切换图标

Question

我制作了一个关注图标(按钮)，当登录用户单击它时，它会使用 ajax 将关注添加到该游戏

我想知道如何切换按钮图标和类。我不太擅长 JavaScript 或 ajax。

这是我的按钮:

<a href="#" class="follow-game" data-game_id="<?php echo $game['id']; ?>"><i class="empty star large icon"></i></a>

这就是我希望将其更改为当用户点击该图标时:

<a href="#" class="unfollow-game" data-game_id="<?php echo $game['id']; ?>"><i class="star large icon"></i></a>

这是我使用 ajax 关注和取消关注的代码:

<script>
    $(function(){
        $('.follow-game').click(function(){
            follow_game(this);
        });
    });
    function follow_game(obj){
        var game_id = $(obj).attr('data-game_id');

        $.ajax({
            url: 'follow.php',
            type: 'POST',
            data: {
                game_id : game_id
            },
            success: function(){
                alert("Followed");
            }
        });

    }


    $(function(){
        $('.unfollow-game').click(function(){
            unfollow_game(this);
        });
    });
    function unfollow_game(obj){
        var game_id = $(obj).attr('data-game_id');

        $.ajax({
            url: 'unfollow.php',
            type: 'POST',
            data: {
                game_id : game_id
            },
            success: function(){
                alert("Unfollowed");
            }
        });

    }
</script>

Answer 1

您可以使用 removeClass和 addClass jquery 方法:

function follow_game(obj){
    var game_id = $(obj).attr('data-game_id');

    $.ajax({
        url: 'follow.php',
        type: 'POST',
        data: {
            game_id : game_id
        },
        success: function(){
            alert("Followed");
            $(obj).find("i").removeClass("empty")
        }
    });
}

function unfollow_game(obj){
    var game_id = $(obj).attr('data-game_id');

    $.ajax({
        url: 'unfollow.php',
        type: 'POST',
        data: {
            game_id : game_id
        },
        success: function(){
            alert("Unfollowed");
            $(obj).find("i").addClass("empty");
        }
    });
}