0

我有一组 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>
4

3 回答 3

3

在您的下一次单击时..从第一个开始全部可见...并显示.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>来检查逻辑..你可以试试..

更新的小提琴

于 2013-02-12T05:53:22.837 回答
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();
    }
});

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

于 2013-02-12T06:17:49.293 回答
1

尝试这个：

$('.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/

于 2013-02-12T06:00:40.953 回答