如何將更改應用於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); 
    }); 
});