jQuery onclick显示下一个隐藏第一个可见的div

Question

我有一组div，我一次只想显示4。 默认情况下，当您单击下一步时，您会看到1,2,3,4，如果再单击下一步，则应看到2,3,4,5，如果您单击下一步，则应看到3,4,5,6，如果您单击上一个，则应看到1 ，2,3,4，如果您最初单击prev，我什么也不会发生。 当您到达终点时，我希望下次点击都不会发生任何事情。

目前，这是我所拥有的，但似乎还有一段很长的路要走？，（ 单击此处 ），

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

Answer 1

在您的下一次单击上。从头开始显示所有内容...并显示.testclass:lt(4) ..在上一个单击时，从上次显示所有.testclass:lt(4)可见...并显示.testclass:lt(4)

尝试这个

$('.testclass:gt(3)').hide();

$('#prev').click(function() {
  var first = $('.testwrap').children('.testclass:visible:last');
  if(first.prevAll('.testclass:lt(4)').length == 4){  //updated check if count of total displayed div is 4.. then sho() and hide() 
    first.prevAll('.testclass:lt(4)').show();
    first.prev().nextAll('.testclass').hide()
  }
});

$('#next').click(function() {
  var last = $('.testwrap').children('.testclass:visible:first');
  if(last.nextAll('.testclass:lt(4)').length == 4){ //updated
    last.nextAll('.testclass:lt(4)').show();
    last.next().prevAll('.testclass').hide();
  }
});

在这里摆弄

我又添加了一个<div>来检查逻辑..您可以尝试一下。

更新的小提琴

Answer 2

对于这种分页，我将使用一个包含当前活动页面和slice方法的变量来显示请求的范围：

var cP = 0 /* current page */, 
    vP = 4 /* how many page links should be visible */;

$('.testclass:gt('+(vP-1)+')').hide();

$('#prev').click(function() {
    if(cP > 0) { 
        cP--;
        $('.testclass').hide();
        $('.testclass').slice(cP,cP+vP).show();
    }
});

$('#next').click(function() {
    if(cP < $('.testclass').length-vP ) { 
        cP++;
        $('.testclass').hide();
        $('.testclass').slice(cP,cP+vP).show();
    }
}); 

您在这里找到一个小提琴 。

Answer 3

尝试这个：

$('.testclass:gt(3)').hide();

$('#prev').click(function() {
    var first = $('.testwrap').children('.testclass:visible:last');
    if(first.prevAll('.testclass:lt(4)').length==4)
    {
        first.prevAll('.testclass:lt(4)').show();
        first.prev().nextAll('.testclass').hide()
    }
});

$('#next').click(function() {
    var last = $('.testwrap').children('.testclass:visible:first');
    if(last.nextAll('.testclass:lt(4)').length==4)
    {
         last.nextAll('.testclass:lt(4)').show();
         last.next().prevAll('.testclass').hide();
    }
});

检查小提琴http://jsfiddle.net/dRfb4/13/