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

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

jquery animation

jQuery显示/隐藏以循环浏览表,jquery,animation,Jquery,Animation,我需要设置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"><

我需要设置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>

您可能还想更改类，以便下一个调用也能正常运行（编辑：插入了建议的更改）：

$（“.month next”）。单击（函数（）{
$（“表月份显示”）
.hide（）
.removeClass（“月展”）
.addClass（“月份隐藏”）
.next（）
.show（）
.removeClass（“月份隐藏”）
.addClass（“月展”）；
if（$（“表”）.hasClass（'month-show'）。长度<1）{
$（'table'）.eq（0）.addClass（'month-show'）；
}
返回false；
});

给你。这应该是可行的（甚至可以考虑骑自行车）。由于页面上的其他标记，您可能需要进行一些轻微的调整

<html>
<head>
<script language="javascript" src="jquery-1.3.2.js"></script>

<script language="javascript">
$(document).ready(function(){

    $(".month-next").click(function () {
     var $monthShow = $("table.month-show");
     var $monthNext = $monthShow.next('table.month-hide');
    if($monthNext.length == 0){
        $monthNext = $('table.month-hide:first');
        }
     $monthShow.removeClass('month-show').addClass('month-hide');
     $monthNext.removeClass('month-hide').addClass('month-show');
     return false;
    });

});
</script>
<style type="text/css">
.month-show{ display:block;}
.month-hide{ display:none;}

</style>
</head>
<body>

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

<table class="month-show"><tr><td>blurb1</td></tr></table>
<table class="month-hide"><tr><td>blurb2</td></tr></table>
<table class="month-hide"><tr><td>blurb3</td></tr></table>
<table class="month-hide"><tr><td>blurb4</td></tr></table>

</body>
</html>


$（文档）.ready（函数（）{
$（“.month next”）。单击（函数（）{
var$monthShow=$（“table.month show”）；
var$monthNext=$monthShow.next（'table.month hide'）；
如果（$monthNext.length==0）{
$monthNext=$（'table.month hide:first'）；
}
$monthShow.removeClass（'month-show'）.addClass（'month-hide'）；
$monthNext.removeClass（'month-hide'）.addClass（'month-show'）；
返回false；
});
});
.month show{display:block；}
.month隐藏{显示：无；}

模糊1
模糊2
模糊3
blurb4

您可以尝试以下方法：

<script type="text/javascript">
    $(function () {
        $(".month-hide").hide();
        $(".month-next").click(function () {
            $(".month-show+table").addClass("month-show").removeClass("month-hide").show();
            $(".month-show").filter(":first").removeClass("month-show").hide();
        });
    });
</script>


$（函数（）{
$（“.month hide”）.hide（）；
$（“.month next”）。单击（函数（）{
$（.month show+table”）.addClass（“month show”）.removeClass（“month hide”）.show（）；
$（“.month show”）.filter（“：first”）.removeClass（“month show”）.hide（）；
});
});

这是一个工作示例，说明了我将如何：

CSS:

HTML

在上面的代码中，

months

是表的列表…在本例中，它包含4个元素；而

numMonths

是元素数…即4

上述代码的“魔力”在于这一行：

curr=（curr+1）%numMonths
该行获取要显示的下一个元素的索引，并以循环方式工作
让我们举一个例子：
   0     1     2     3
=========================
|  a  |  b  |  c  |  d  |
=========================

现在，让我们假设curr
为0：
   0     1     2     3
=========================
|  a  |  b  |  c  |  d  |
=========================
   ^

//curr is currently 0
curr = (curr + 1) % numMonths; //(0 + 1) % 4
//now, curr is 1

   0     1     2     3
=========================
|  a  |  b  |  c  |  d  |
=========================
         ^

执行该行代码后，curr
变为1:（0+1）%4=1。这意味着要显示的元素的下一个索引是1。因此，我们通过删除hide
class:months.eq（curr）.removeClass（“hide”）来获取并显示下一个元素
现在让我们来看一个例子，其中curr
是最后一个元素：3
   0     1     2     3
=========================
|  a  |  b  |  c  |  d  |
=========================
                     ^

//curr is currently 3
curr = (curr + 1) % numMonths; //(3 + 1) % 4
//now, curr is 0

   0     1     2     3
=========================
|  a  |  b  |  c  |  d  |
=========================
   ^

如您所见，curr
现在为0…因此循环继续。好的，比我的答案好得多。更流畅。但是，当最后一个项目可见时，不考虑循环返回到第一个项目：可能需要在返回前的末尾进行检查：if（$（“表”）.hasClass（'month-show'）。length<1）$（'table'）。eq（0）。addClass（'month-show'）@杰米克。。因此，没有比你的回答更好的了：）
.month.hide { display: none; }

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

<table class="month"><tr><td>a</td></tr></table>
<table class="month hide"><tr><td>b</td></tr></table>
<table class="month hide"><tr><td>c</td></tr></table>
<table class="month hide"><tr><td>d</td></tr></table>

$(function () {
    $(".month-next").click(function () {
        var months = $(".month"), numMonths = months.length, curr = 0;
        return function () {
            //Hide the current table, by adding the 'hide' class
            months.eq(curr).addClass("hide"); 

            //Get the index of next table in the list
            curr = (curr + 1) % numMonths;  

            //Show the next table, by removing the 'hide' class
            months.eq(curr).removeClass("hide"); 
        }
    }());
});

   0     1     2     3
=========================
|  a  |  b  |  c  |  d  |
=========================

   0     1     2     3
=========================
|  a  |  b  |  c  |  d  |
=========================
   ^

//curr is currently 0
curr = (curr + 1) % numMonths; //(0 + 1) % 4
//now, curr is 1

   0     1     2     3
=========================
|  a  |  b  |  c  |  d  |
=========================
         ^

   0     1     2     3
=========================
|  a  |  b  |  c  |  d  |
=========================
                     ^

//curr is currently 3
curr = (curr + 1) % numMonths; //(3 + 1) % 4
//now, curr is 0

   0     1     2     3
=========================
|  a  |  b  |  c  |  d  |
=========================
   ^