2017-10-21 5 views
1

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).Comment appliquer des modifications à la classe actuelle dans jQuery?

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

Répondre

3

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

L'image disparaît juste au moment où j'utilise ce code et le problème encore existe. Il n'aime que le premier article –

+0

Je pense que la raison pour laquelle $ (this) ne fonctionnera pas ici est que $ (this) pointerait vers le '' et vous essayez de définir son 'attr ('src', '. .. ') ' –

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

Merci, fonctionne parfaitement! –