Question

我要做的是隐藏前12个元素并显示接下来的12个元素并反转，它就像搜索结果中的下一页和上一页。

从[{3}}

获取此代码

Jquery hide first 12 elementes, show next 12 elements

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

此代码有效但我想用前一个按钮

来反转它

Answer 1

你可以试试这个：

<强> JQuery的

$(".next").click(function() {
  var childEls = $('.inner-content').find('.front-pro').not(".visible") ; // array
  var count = 1;

  $.each(childEls, function() {
    if (count <= 12) {
        $(this).toggleClass('visible');
    }
    count++;
  });
});

$(".prev").click(function() {
  var count = 1;

  $($('.inner-content').find('.visible').get().reverse()).each(function() { 
      if (count <= 12) {
        $(this).toggleClass('visible');
    }
    count++;
  });
})

以下是演示文稿的链接 - JsFiddle

Answer 2

这些方面的一些东西都是我的方法。由于您检索了在x中使用的所有元素。我将查看Jquery Slice（）方法，您可以在其中请求选择器结果的子集。每说不完整，但我希望它可以帮助你到达你想要的地方。

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个元素上一个和下一个

2 个答案: