javascript - Jquery 隐藏前 12 个元素，显示后 12 个元素

Question

我想做的是隐藏前 12 个元素并显示接下来的 12 个元素。

//this is dynamic loaded content
<div class="inner-content">
     <div class="front-pro">1</div>
     <div class="front-pro">2</div>
     <div class="front-pro">3</div>
     <div class="front-pro">4</div>
     <div class="front-pro">5</div>
     <div class="front-pro">6</div>
     <div class="front-pro">7</div>
     <div class="front-pro">8</div>
     <div class="front-pro">9</div>
     <div class="front-pro">10</div>
     <div class="front-pro">11</div>
     <div class="front-pro">12</div>
     <div class="front-pro hidden">13</div>
     <div class="front-pro hidden">14</div>
     ..... etc (200 divs more)
</div>
<div onclick="SearchNext();">next</div>

这是我的 javascript/jquery:

function SearchNext(){
 var first = $('.inner-content').children('.front-pro:hidden:first');
    first.prevAll(':lt(12)').hide();
    first.nextAll(':lt(12)').show();
}

它会工作一次，然后停止工作。 (它会跳过数字 13)我希望每次单击“下一步”时都可以看到 12 个新元素，并隐藏前一个元素。

更新 - 这是我完美运行的最终结果 JSFIDDLE DEMO

感谢亚历克斯·查尔

PHP 用于创建页码，您也可以使用 javascript 来完成此操作

//$counter is search results
    $x = 1; 
    $Pnumbers = '';
    while($x <= ceil($counter/12)) {
        if($x == 1){ $ecl = 'bold'; } else{ $ecl = ''; }
       $Pnumbers .= ' <span class="number '.$ecl.' numbering" onClick="GoTo('.$x.');">'.$x.'</span> ';
        $x++;
    } 

    if($counter > 12){ echo'<div class="page-numbers">
    <span class="prev number" onclick="GoTo(\'prev\')">Prev</span>
    '.$Pnumbers.'
    <span class="next number" onclick="GoTo(\'next\');">Next</span>
    </div>'; }

Javascript:

function GoTo(nn) {
      var nng = parseInt($('.page-numbers .numbering.bold').text());
     if(nn == 'next'){
        nn = nng+1; 
     }if(nn == 'prev'){
         nn = nng-1; 
     } 
    //get all child elements with class front-pro 
    //of element with class .inner-content
    var childElems = $(".inner-content .front-pro");
    var totalpages = Math.ceil(childElems.length/12);
    //iterate through the elements
    var first = (nn-1)*12;
    var last = first+11;
    childElems.each(function(i, el) {

      //show the elements that match the criteria removing css class
      if (i >= first && i <= last) {
        $(el).removeClass('hidden');
      } else {
        //hide rest
        $(el).addClass('hidden');
      }
    });

    if(nn > 1){ $('.page-numbers .prev').show(); }else{ $('.page-numbers .prev').hide(); }
    if(nn < totalpages){ $('.page-numbers .next').show(); }else{ $('.page-numbers .next').hide(); }
    $('.page-numbers .numbering').removeClass('bold');
    $('.page-numbers .numbering:eq('+(nn-1)+')').addClass('bold');
  }

CSS:

.front-pro.hidden{ display:none !important; }
.prev {  display: none; }
.page-numbers .number{
background: #ff0000;  }
.page-numbers{ text-align:center; }
.page-numbers .number.bold{ font-weight:bold; background:#000; }
.page-numbers .number:hover{ background:#000; cursor: pointer; }

确保前 12 个 div 不包含“hidden”类，后面的所有 div 都应该在该类中包含“hidden”

Answer 1

我对实现进行了一些更改以支持和以前的。我使用 css 类来隐藏内容。

function searchNext() {
  $('.inner-content').children('.front-pro:lt(12)').addClass('hidden');
  $('.inner-content').children('.front-pro:gt(11)').removeClass('hidden');
  $(".next").hide();
  $(".prev").show();
}

function searchPrev() {
  $('.inner-content').children('.front-pro:lt(12)').removeClass('hidden');
  $('.inner-content').children('.front-pro:gt(11)').addClass('hidden');
  $(".next").show();
  $(".prev").hide();
}

.front-pro.hidden {
  display: none;
}
.prev {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inner-content">
  <div class="front-pro">1</div>
  <div class="front-pro">2</div>
  <div class="front-pro">3</div>
  <div class="front-pro">4</div>
  <div class="front-pro">5</div>
  <div class="front-pro">6</div>
  <div class="front-pro">7</div>
  <div class="front-pro">8</div>
  <div class="front-pro">9</div>
  <div class="front-pro">10</div>
  <div class="front-pro">11</div>
  <div class="front-pro">12</div>
  <div class="front-pro hidden">13</div>
  <div class="front-pro hidden">14</div>
</div>
<div class="next" onclick="searchNext();">next</div>
<div class="prev" onclick="searchPrev();">prev</div>

在您对下一个和上一个进行评论后，我创建了一个通用解决方案(我使用步骤 3 进行演示，但您可以使用您想要的任何内容):

var pager = (function() {
  /*declare private variables*/
  var first = 0,
    last = 2,
    step = 3;

  function searchNext() {
    //next function
    //increasing first and last variables
    first += step;
    last += step;
    pagerHelper();
  }

  function searchPrev() {
    //previous function
    //decrease first and last variables
    first -= step;
    last -= step;
    pagerHelper();
  }

  function pagerHelper() {
    //get all child elements with class front-pro 
    //of element with class .inner-content
    var childElems = $(".inner-content .front-pro");
    //iterate through the elements
    childElems.each(function(i, el) {
      //show the elements that match the criteria removing css class
      if (i >= first && i <= last) {
        $(el).removeClass('hidden');
      } else {
        //hide rest
        $(el).addClass('hidden');
      }
    });
    nextPreviousToggle(childElems.length);
  }

  function nextPreviousToggle(maxEle) {
    //here the code is to show/hide next/previous buttons
    if (last >= maxEle) {
      $(".next").hide();
    } else {
      $(".next").show();
    }
    if (first === 0) {
      $(".prev").hide();
    } else {
      $(".prev").show();
    }
  }
  return {
    searchNext: searchNext,
    searchPrev: searchPrev
  }
})();

.front-pro.hidden {
  display: none;
}
.prev {
  display: none;
}
.prev:hover,
.next:hover {
  text-decoration: underline;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inner-content">
  <div class="front-pro">1</div>
  <div class="front-pro">2</div>
  <div class="front-pro">3</div>
  <div class="front-pro hidden">4</div>
  <div class="front-pro hidden">5</div>
  <div class="front-pro hidden">6</div>
  <div class="front-pro hidden">7</div>
  <div class="front-pro hidden">8</div>
  <div class="front-pro hidden">9</div>
  <div class="front-pro hidden">10</div>
  <div class="front-pro hidden">11</div>
  <div class="front-pro hidden">12</div>
  <div class="front-pro hidden">13</div>
  <div class="front-pro hidden">14</div>
</div>
<span class="next" onclick="pager.searchNext();">next</span>
<span class="prev" onclick="pager.searchPrev();">prev</span>

引用文献

:gt()

:lt()