jQuery 显示/隐藏以循环浏览表格

Question

我需要设置 jquery 来循环浏览表格，确保它显示/隐藏正确的表格。

基本的 HTML 结构是:

<p><a href="#" class="month-next">Next Month</a></p>

<table class="month-show"><tr><td>blurb</td></tr></table>
<table class="month-hide"><tr><td>blurb</td></tr></table>
<table class="month-hide"><tr><td>blurb</td></tr></table>
<table class="month-hide"><tr><td>blurb</td></tr></table>

等等

到目前为止，在 jQuery 中我有:

$(".month-next").click(function () {
 $("table.month-show").hide();
 HERE I NEED SOME CODE TO ONLY SHOW THE NEXT TABLE IN THE HTML .show();
 return false;
});

Answer 1

$(".month-next").click(function () {
 $("table.month-show").hide().next().show();
 return false;
});

您可能还想更改类，以便下一次调用也能正常工作(编辑:插入 Mark Schultheiss 建议的更改):

$(".month-next").click(function () {
    $("table.month-show")
        .hide()
        .removeClass("month-show")
        .addClass("month-hide")
        .next()
        .show()
        .removeClass("month-hide")
        .addClass("month-show");
    if ($("table").hasClass('month-show').length < 1) {
        $('table').eq(0).addClass('month-show');
    }
 return false;
});