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

Question

我读过类似的问题，并尝试了不同的方法，但似乎没有任何工作。我有一个喜欢系统。切换喜欢（充满心脏图标）和不喜欢（心脏平面图标）之间的心脏图像。

问题是，当我点击like/heart按钮时，所有其他记录的心脏图标变成喜欢状态。同样的数字也一样。当我喜欢帖子时，所有贴子的数量变得相同。

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

Answer 2

您应该链中的Ajax调用，并获得数更新“喜欢”的状态后，像这样：

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