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

Question

我有一组 div，我只想一次显示 4 个。默认情况下，当您单击下一步时，您应该看到 1,2,3,4，如果您单击下一步，您应该看到 2,3,4,5，如果您单击下一步，您应该看到 3,4,5,6，如果您单击上一个，您应该看到 1 ,2,3,4，如果您最初单击上一个，我希望什么也不会发生。当你读到最后时，我希望下次点击时什么也不会发生。

目前这就是我所拥有的，但似乎还很遥远？，(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>

Answer 1

下次单击时..从第一个开始获取所有可见内容...并显示 .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();
  }
});

fiddle here

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

已更新fiddle