javascript - 如何将更改应用于 jQuery 中的当前类？

Question

我读过类似的问题并尝试了不同的方法，但似乎没有任何效果。我有一个喜欢系统。在喜欢(填充的心形图标)和不喜欢(无边框的心形图标)之间切换的心形图像。

问题是，当我点击喜欢/心形按钮时，所有其他记录的心形图标都变成喜欢状态。点赞数也是如此。当我点赞一个帖子时，所有帖子的点赞数都变得相同。

另外，我正在运行一个 AJAX 请求来获取点赞数。当我尝试输出喜欢和递增/递减(如果他们喜欢/不喜欢)时，输出很奇怪。它转到 -1 或 01 等。

这是我的 main.blade.php :

<span class="activityLikes">
    <input type="hidden" class="activityIdHidden" value="{{ $activity->activity_id }}">
    <a class="likeBtn">
    @if(Auth::user()->hasLikedActivity($activity))
        <img class="likeImg likeTrue" src="IMG/icons/likeTrue.png" alt="likes">
    @else
        <img class="likeImg likeFalse" src="IMG/icons/like.png" alt="likes">
    @endif
    </a><span class="likesCount">{{ $activity->likes->count() }}</span>
</span>

这是我的 main.js 文件:

$('.likeBtn').on('click', function(e){

    e.preventDefault();

    var likeCount = 0;

    $.ajax({
        type: 'GET',
        url: './mainView/getLikeCount',
        data: {activityId: activityId},
        success: function(data){
            likeCount = data;
        },
        error: function(e){
            console.log(JSON.stringify("Exception: " + e));
        }
    });

    $.ajax({
        type: 'POST',
        url: './mainView/postlike',
        data: {activityId : activityId, user_id: user_id},
        success: function(data){
            if(data == "deleted"){
                $('.likeImg').attr('src', 'IMG/icons/like.png');
                $('.likesCount').text(likeCount - 1);
            } else if(data == "liked"){
                $('.likeImg').attr('src', 'IMG/icons/likeTrue.png');
                $('.likesCount').text(likeCount + 1);
            }
        },
        error: function(e){
            console.log(JSON.stringify("Exception: " + e));
        }
    });
});

Answer 1

这是因为您在成功事件中更新了每个具有 .likeImg 类的图像。

你能试试下面的代码吗？

$('.likeBtn').on('click', function(e){

    e.preventDefault();

    var likeCount = 0;
    // element to update is `this` (the element that had been clicked)
    var elementToUpdate = $(this).children('img'); 

    $.ajax({
        type: 'GET',
        url: './mainView/getLikeCount',
        data: {activityId: activityId},
        success: function(data){
            likeCount = data;
        },
        error: function(e){
            console.log(JSON.stringify("Exception: " + e));
        }
    });

    $.ajax({
        type: 'POST',
        url: './mainView/postlike',
        data: {activityId : activityId, user_id: user_id},
        success: function(data){
            if(data == "deleted"){
                elementToUpdate.attr('src', 'IMG/icons/like.png');
                elementToUpdate.text(likeCount - 1);
            } else if(data == "liked"){
                elementToUpdate.attr('src', 'IMG/icons/likeTrue.png');
                elementToUpdate.text(likeCount + 1);
            }
        },
        error: function(e){
            console.log(JSON.stringify("Exception: " + e));
        }
    });
});