我有下表:
<table>
<tr class="change"><td>Click to change</td></tr>
<tbody id="p1" class="now">
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</tbody>
<tbody id="p2" class="next">
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</tbody>
<tbody id="p3" class="previous">
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</tbody>
</table>
我想隐藏带有类"now"的 tbody,并在单击更改行时显示带有类"next"的 tbody。
我的Jquery(仅现在和下一个计算):
$(document).ready(function(){
$('.change').click(function(){
$('.now').hide('slow', function(){
$('.next').show('slow', function(){
$('#p1').removeClass('recent');
$('#p2').removeClass('next');
$('#p1').addClass('next');
$('#p2').addClass('recent');
});
});
});
});
我知道我做错了,所以我想问你,如何以某种方式很好地同步它,当我点击"更改"时,我的"现在"正文变成"上一个","下一个"变成"现在"和"上一个"变成下一个?
试试
$(document).ready(function () {
$('.change').click(function () {
$('.now').hide('slow', function () {
$('.next').show('slow', function () {
$prev = $('.previous');
$now = $('.now');
$next = $('.next');
$prev.removeClass('previous').addClass('next');
$now.removeClass('now').addClass('previous');
$next.removeClass('next').addClass('now');
});
});
});
});
$('.change').click(function(){
var now = $('.now');
var next = $('.next');
var previous = $('.previous');
now.hide('slow', function(){
next.show('slow');
previous.removeClass('previous').addClass('next');
now.removeClass('now').addClass('previous');
next.removeClass('next').addClass('now');
});
});
演示
$('.change').click(function() {
$('.now').attr('class', 'previous');
$('.next').attr('class', 'now');
$('.previous').attr('class', 'next');
});