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

來源

2010-02-25 Adi

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

來源

2010-02-25 12:57:02 harpax

好吧，遠遠好於我的回答。流利得多。但是，當最後一個可見時，不會注意循環返回第一個項目：P – Jamiec 2010-02-25 13:06:19

可能需要在返回之前的末尾進行檢查：if（$（「table」）。hasClass（'month-show'）） .length <1）$（'table'）。eq（0）.addClass（'month-show'）; – 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>

來源

2010-02-25 13:05:32 Jamiec

你可以試試這個：

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

來源

2010-02-25 13:09:17 vintem

這是一個工作例子，說明我會把它：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 ...因此循環繼續。

來源

2010-02-25 15:00:41

jQuery顯示/隱藏循環表

回答

相關問題