개별 divs에 대한 jquery 함수

Question

이 작업은 .prev() 함수를 사용하여 수행 할 수 있다고 생각했지만 어떤 이유로 작동하지 않습니다.

블로그의 게시물에 대해 위로/아래로 버튼을 만듭니다. 사용자가 투표 한 내용에 따라 메시지를 표시하려고합니다. UP 또는 DOWN 중 하나를 선택하면 특정 게시물 1 개를 투표 할 때마다 모든 게시물에 대해 메시지가 나타납니다.

이것은 내 코드입니다. 더 읽기 쉽도록 prev() 시도를 제거했습니다. 스크립트 잘 아약스 현명한 작동합니다.

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

샘플 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> 

편집 : http://jsfiddle.net/XJeXw/

Answer 1

당신은 click 핸들러 내부의 버튼에 대한 참조를 저장해야합니다 (예를 들어, var me = $(this);), 다음 사용 아약스 부분없이 제공 jsfiddle me.nextAll('.msg_box:first') AJAX 처리기 안에.

편집 : 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); 
    } 
});