jQuery隐藏前12个元素，显示后12个元素上一个和下一个 [英] Jquery hide first 12 elementes, show next 12 elements Previous and Next

问题描述

我要做的是隐藏前12个元素，并显示后12个元素并反向显示，就像搜索结果中的下一页和上一页一样.

what i am trying to do is make the first 12 elements hidden and show the next 12 elements and reverse, its like a next page and previous page in a search result.

从> jquery隐藏前12个元素，显示此代码接下来的12个元素

演示

  <div class="inner-content">
      <div class="front-pro">151</div>
      <div class="front-pro">151</div>
      <div class="front-pro">151</div>
      <div class="front-pro">151</div>
      <div class="front-pro">151</div>
      <div class="front-pro">151</div>
      <div class="front-pro">151</div>
      <div class="front-pro">151</div>
      <div class="front-pro">151</div>
      <div class="front-pro">151</div>
      <div class="front-pro">151</div>
      <div class="front-pro">151</div>
      <div class="front-pro">152</div>
      <div class="front-pro">152</div>
etc...
    </div>

    <div>next</div>

    var x = $(".inner-content div").hide();

    $("div:contains(next)").click(function() {
      var cnt = $(this).data("cnt") || 0;
      if((cnt * 12) > x.length){ cnt = 0; }
      x.hide().filter(":eq("+ (cnt * 12)  + "), :lt(" + ((cnt * 12) + 12) + "):gt(" + (cnt * 12) + ")").show();
      $(this).data("cnt", ++cnt);
    });

此代码有效，但我想使用上一个按钮将其反转

This code works but i want to reverse it with a previous button

推荐答案

遵循这些原则是我的方法. 由于您检索了x中正在使用的所有元素. 我将研究Jquery Slice()方法，您可以在其中请求选择器结果的子集.每句话还不完整，但我希望它能帮助您到达想要的地方.

Something along these lines would have been my approach. Since you retrieve all of the elements that you are working with in x. I would look into the Jquery Slice() method where you can ask for a subset of the selector results. Not complete per say, but I hope it helps you get to where you want.

var x = $(".inner-content div").hide();
var $nextdiv = $("div:contains(next)");
var $previousdiv = $("div:contains(previous)");

var pageNum = 0;
var numOfPages = Math.ceil(x.length / 12);


$nextdiv.click(function() {
  if (pageNum < numOfPages) {
    var toshow = x.slice(pageNum * 12, pageNum * 12 + 12).show(); // show next 12
    x.not(toshow).hide(); // hide all others
    pageNum++;
  }
});


$previousdiv.click(function() {
  if (pageNum > 0) {
    pageNum--;
    var toshow = x.slice((pageNum - 1) * 12, (pageNum - 1) * 12 + 12).show(); // show last pages 12 records
    x.not(toshow).hide(); // hide all others
  }
});

https://jsfiddle.net/3rk53h7L/5/

这篇关于jQuery隐藏前12个元素，显示后12个元素上一个和下一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！