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;
});回答 4
Stack Overflow用户
发布于 2010-02-25 20:57:02
$(".month-next").click(function () {
$("table.month-show").hide().next().show();
return false;
});您可能还想更改类，以便下一次调用也能正常工作(edit：建议的插入更改)：
$(".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;
});Stack Overflow用户
发布于 2010-02-25 23:00:42
这是我如何使用它的一个工作示例：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是本例中tables...which的列表，包含4个元素；numMonths是elements...ie的数量，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...and，因此循环继续。
Stack Overflow用户
发布于 2010-02-25 21:05:32
这就是你要的。这应该是可行的(甚至可以处理循环)。由于页面上的其他标记，您可能需要进行一些细微的调整。
<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>https://stackoverflow.com/questions/2334041
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号