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

     }); 
    }); 

}); 

});

Я вижу, что я делаю это неправильно, поэтому я хочу спросить вас, как красиво синхронизировать его таким образом, что, когда я нажимаю «изменить», мой «сейчас» становится «предыдущим», «следующим», становится «сейчас», а «предыдущий» становится следующим?

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