jQuery显示/隐藏循环表

问题描述：

我需要设置jQuery来循环遍历表，确保它显示/隐藏正确的表。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; 
});

答

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

你可能也想改变类，所以即下一次调用也会起作用（编辑：插入更改sugg通过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; 
});

好吧，远远好于我的回答。流利得多。但是，当最后一个可见时，不会注意循环返回第一个项目：P – Jamiec 2010-02-25 13:06:19

可能需要在返回之前的末尾进行检查：if（$（“table”）。hasClass（'month-show'）） .length 2010-02-25 13:15:16

@Jamiec ..因此没有比你的回答更好:) – harpax 2010-02-25 18:36:23

答

在这里你去。这应该工作（甚至照顾自行车）。由于其他标记在Tyour页面上，您可能需要稍作调整。

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

答

你可以试试这个：

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

答

这是一个工作例子，说明我会把它：http://jsbin.com/ogika

CSS：

.month.hide { display: none; }

HTML

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

JavaScript的：

$(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"); 
     } 
    }()); 
});

在上面的代码，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类：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 ...因此循环继续。

jQuery显示/隐藏循环表

相关推荐