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

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

问题是，当我单击“喜欢/心脏”按钮时，所有其他记录的心脏图标都变成“​​喜欢”状态。相似计数也是如此。当我喜欢某个帖子时，所有帖子的点赞次数都相同。

另外，我正在运行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));
        }
    });
});

最佳答案

这是因为您在成功事件上更新了所有具有.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));
        }
    });
});

关于javascript - 如何将更改应用于jQuery中的当前类？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46862023/