0

divのセットがあり、一度に4つだけ表示したいと思います。デフォルトでは、[次へ]をクリックすると2,3,4,5が表示され、[次へ]をクリックすると3,4,5,6が表示され、[前へ]をクリックすると1が表示されます。 、2、3、4、最初に前をクリックした場合、私は何も起こらないようにしたいと思います。そして、あなたが最後に到達したとき、私は次のクリックで何も起こらないことを望みます。

現在、これは私が持っているものですが、それは公正な方法のようです？、（ここをクリックしてください）、

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

ここをいじる

ロジックをチェックするためにもう1つ追加<div>しました。試してみることができます。

更新されたフィドル

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

ここにフィドルがあります。

于 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 に答える