Comment appliquer des modifications à la classe actuelle dans jQuery?

Question

J'ai lu des questions similaires et essayé différentes méthodes, mais rien ne semble fonctionner. J'ai un système de sympathie. Une image du cœur qui alterne entre aimé (icône du cœur rempli) et unliked (icône du coeur uni).

Le problème est que lorsque je clique sur le bouton J'aime/Coeur, l'icône du cœur de tous les autres enregistrements devient l'état J'aime. La même chose vaut pour le nombre similaire. Quand j'aime un post, tout le poste est comme le compte devient le même.

En outre, je cours une demande d'AJAX pour obtenir le nombre de goûts. Quand j'essaie de sortir les likes et d'incrémenter/décrémenter s'ils aiment/contrairement, la sortie est bizarre. Il va à -1 ou 01 etc.

Ceci est mon 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> 

Ceci est mon fichier 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

Il est parce que vous mettez à jour tous les image qui a la classe .likeImg sur l'événement de succès.

Pouvez-vous essayer le code suivant?

$('.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

Vous devez chaîne vos appels Ajax, et obtenir le nombre après mise à jour du « comme » le statut, comme celui-ci:

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