Fonction jquery pour les div individuels

Question

Je pensais que cela pouvait être réalisé avec la fonction .prev() mais pour une raison quelconque cela ne fonctionne pas.

Je crée des boutons pouce haut/bas pour les messages sur un blog. J'essaie d'afficher des messages en fonction de ce que l'utilisateur vote. Soit en haut ou en bas mais chaque fois que je vote 1 poste particulier, le message apparaît pour tout le poste.

Ceci est mon code. J'ai enlevé les tentatives prev() pour le rendre plus lisible. Le script fonctionne bien ajax sage.

$(document).ready(function() { 
    $(".vote_button").click(function(e) { //the UP or DOWN vote button 
    var vote_status = $(this).attr('class').split(' ')[1]; //gets second class name following vote_button 
    var vote_post_id = $(this).attr("id"); //the post ID 
    var dataString = 'post_id=' + vote_post_id + '&vote_status=' + vote_status; 

    $.ajax({ 
     type: "POST", 
     url: "url/add_vote.php", 
     data: dataString, 
     cache: false, 
     success: function(html) { 
      if (vote_status == 1) 
     { 
       $('.msg_box').fadeIn(200); 
       $('.msg_box').text('You voted UP!'); 
      } 
      if (vote_status == 2) 
     { 
       $('.msg_box').fadeIn(200); 
       $('.msg_box').text('You voted DOWN!'); 
      } 
     } 
    }); 
    return false; 
}); 
}); 

Exemple HTML

<div class="vote_button 1" id="18">UP</div> 
<div class="vote_button 2" id="77">DOWN</div> 
<div class="msg_box"></div> 

<div class="vote_button 1" id="43">UP</div> 
<div class="vote_button 2" id="15">DOWN</div> 
<div class="msg_box"></div> 


<div class="vote_button 1" id="11">UP</div> 
<div class="vote_button 2" id="78">DOWN</div> 
<div class="msg_box"></div> 

EDIT: Fourni jsFiddle sans partie Ajax http://jsfiddle.net/XJeXw/

Answer 1

Vous devez enregistrer une référence au bouton à l'intérieur du gestionnaire click (par exemple, var me = $(this);), puis utilisez me.nextAll('.msg_box:first') à l'intérieur du gestionnaire AJAX.

EDIT: Example:

var me = $(this); //The this will be different inside the AJAX callback 

$.ajax({ 
    type: "POST", 
    url: "url/add_vote.php", 
    data: dataString, 
    cache: false, 
    success: function(html) { 
     me.nextAll('.msg_box:first') 
      .text(vote_status == 1 ? 'You voted UP!' : 'You voted DOWN!') 
      .fadeIn(200); 
    } 
});