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

        });
    });

});  

});

我知道我做错了，所以我想问你，如何以某种方式很好地同步它，当我点击“更改”时，我的“现在”tbody 变成“上一个”，“下一个”变成“现在”和“以前”变成了下一个？

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

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