JQuery와 addClass()와 removeClass() 동기화

Question

나는 다음과 같은 테이블이 있습니다

<table> 
<tr class="change"><td>Click to change</td></tr> 

<tbody id="p1" class="now"> 
<tr>...</tr> 
<tr>...</tr> 
<tr>...</tr> 
<tr>...</tr> 
</tbody> 
<tbody id="p2" class="next"> 
<tr>...</tr> 
<tr>...</tr> 
<tr>...</tr> 
<tr>...</tr> 
</tbody> 
<tbody id="p3" class="previous"> 
<tr>...</tr> 
<tr>...</tr> 
<tr>...</tr> 
<tr>...</tr> 
</tbody> 
</table> 

내가 "지금"클래스 TBODY을 숨기고 클래스와 하나를 표시 할을 "다음"때 난을 클릭합니다 행을 변경하십시오.

내 JQuery와는 (만 지금 다음 계산) :

$(document).ready(function(){ 

$('.change').click(function(){ 

    $('.now').hide('slow', function(){ 
     $('.next').show('slow', function(){  


     $('#p1').removeClass('recent'); 
     $('#p2').removeClass('next'); 

     $('#p1').addClass('next'); 
     $('#p2').addClass('recent'); 

     }); 
    }); 

}); 

});

내가 잘못하고있는 것을 본다. 그래서 나는 "변화"를 클릭 할 때 내 "지금"tbody가 "이전", "다음"이되는 방식으로 그것을 훌륭하게 동기화하는 방법을 묻고 싶다. "지금"이되고 "이전"이 다음이됩니까?

Answer 1

$('.change').click(function(){ 
    var now = $('.now'); 
    var next = $('.next'); 
    var previous = $('.previous'); 
    now.hide('slow', function(){ 
     next.show('slow'); 
     previous.removeClass('previous').addClass('next');    
     now.removeClass('now').addClass('previous'); 
     next.removeClass('next').addClass('now'); 
    }); 
});​ 

DEMO

Answer 2

이

$(document).ready(function() { 
    $('.change').click(function() { 
     $('.now').hide('slow', function() { 
      $('.next').show('slow', function() { 
       $prev = $('.previous'); 
       $now = $('.now'); 
       $next = $('.next'); 
       $prev.removeClass('previous').addClass('next');    
       $now.removeClass('now').addClass('previous'); 
       $next.removeClass('next').addClass('now'); 

      }); 
     }); 
    }); 
}); 

Answer 3

$('.change').click(function() { 
    $('.now').attr('class', 'previous'); 
    $('.next').attr('class', 'now'); 
    $('.previous').attr('class', 'next'); 
});