jquery - 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>

変更行をクリックすると、クラス「now」のtbodyを非表示にし、クラス「next」の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

試す

$(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 2

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

デモ

Answer 3

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