如何在jQuery中对当前类应用更改？

Question

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

问题是，当我点击喜欢/心形按钮时，所有其他记录＆＃39;心脏图标变成喜欢的状态。同样的计数也是如此。当我喜欢帖子时，所有帖子都像计数一样。

另外，我正在运行一个AJAX请求来计算喜欢的数量。当我尝试输出喜欢和增加/减少，如果他们喜欢/不同，输出是奇怪的。它会转到-1或01等。

这是我的main.blade.php：

public class NestedScrollView extends FrameLayout implements NestedScrollingParent, 
    NestedScrollingChild, ScrollingView { 
          ... 
       @Override 
        public boolean onTouchEvent(MotionEvent ev) { 
          switch (actionMasked) { 
            case MotionEvent.ACTION_DOWN: { 
                if (getChildCount() == 0) { 
                    return false; 
                } 
                //add this condition 
                if (!inChild((int) ev.getX(), (int) ev.getY())) { 
                    return false; 
                } 
                if ((mIsBeingDragged = !mScroller.isFinished())) { 
                        final ViewParent parent = getParent(); 
                    if (parent != null) { 
                        parent.requestDisallowInterceptTouchEvent(true); 
                    } 
                } 
               ... 
           } 
      } 

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        ...
        switch (action & MotionEventCompat.ACTION_MASK) {
            ...
            case MotionEvent.ACTION_DOWN: {
                ...
                // replace this line:
                // mIsBeingDragged = !mScroller.isFinished();
                mIsBeingDragged = false;
                ...
            }
        }
    }
}

这是我的main.js文件：

<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>

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

Answer 2

您应该链接Ajax调用，并在更新“like”状态后获取计数，如下所示：

function errHandler(e) {
    console.log(JSON.stringify("Exception: " + e));
} 

$('.likeBtn').on('click', function(e){
    var activityId = +$(this).siblings(".activityIdHidden").val(),
        $img = $("img", this),
        $likes = $(this).siblings(".likesCount");

    e.preventDefault();

    $.ajax({
        type: 'POST',
        url: './mainView/postlike',
        data: {activityId : activityId, user_id: user_id},
        error: errHandler
    }).then(function(data){
        $img.attr('src', data === "deleted" ? 'IMG/icons/like.png' : 'IMG/icons/likeTrue.png');
        return $.ajax({
            type: 'GET',
            url: './mainView/getLikeCount',
            data: {activityId: activityId},
            error: errHandler
        });
    }).then(function(data){
        $likes.text(data);
    });
});