我有一組div,我只想一次顯示4個。默認情況下,你會看到1,2,3,4當你點擊下一個你應該看到2,3,4,5,如果你點擊下一個你應該看到3,4,5,6,如果你點擊prev你應該看到1 ,2,3,4,如果您最初單擊prev,我希望不發生任何事情。當你到最後,我希望在下次點擊時不會發生任何事情。jQuery onclick show next隱藏第一個vissible div
目前,這是我有什麼,但它似乎是一個公平的路要走?(click here),
<div class="testwrap">
<div class="testtitle">
<h3>Test title 1</h3>
</div>
<span style="float:left" id="prev">prev</span>
<div class="testclass test1">1</div>
<div class="testclass test2">2</div>
<div class="testclass test3">3</div>
<div class="testclass test4">4</div>
<div class="testclass test5">5</div>
<div class="testclass test6">6</div>
<div class="testclass test7">7</div>
<div class="testclass test8">8</div>
<div class="testclass test9">9</div>
<div class="testclass test10">10</div>
<span style="float:right" id="next">next</span>
</div>
<script>
$('.testclass:gt(3)').hide();
$('#prev').click(function() {
var first = $('.testwrap').children('.testclass:visible:first');
first.prevAll('.testclass:lt(1)').show();
first.prev().nextAll('.testclass').hide()
});
$('#next').click(function() {
var last = $('.testwrap').children('.testclass:visible:last');
last.nextAll('.testclass:lt(1)').show();
last.next().prevAll('.testclass').hide();
});
</script>
<style>
.testwrap {
float: left;
background: orange;
width: 500px;
}
.testclass {
background: none repeat scroll 0 0 yellow;
border: 1px solid red;
float: left;
font-size: 28px;
height: 40px;
margin: 7px 3px;
overflow: hidden;
width: 100px;
text-align: center;
}
.testtitle {
float:left;
display:inline;
width: 100%;
}
</style>
爲什麼有prev按鈕,當你不想要發生什麼? – 2013-02-12 06:02:36
只有第一次例如最初沒有prev,但是當你點擊下一個prev變得相關。你提到的 – ak85 2013-02-12 06:04:38
,如果你有3,4,5,6,你點擊prev,它應該看1,2,3,4理想情況下它不會是2,3,4,5?這背後的基本原理是什麼? – 2013-02-12 06:06:09