Question

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

目前这是我所拥有的，但似乎是一个公平的方式？，（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

Answer 2

对于这样的分页，我会使用包含当前活动页面和切片方法的变量来显示请求的范围：

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();
    }
});

你在这里找到fiddle。

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/

jQuery onclick show next隐藏第一个可见的div

3 个答案: