Question

我试图按类别过滤一些div，将divs数量限制为最多6个div，如果超过6个div则使下一个/后退按钮在其中浏览。

Html是：类别按钮：

            <div class="category-filter box">
                <a id="paste" class="button">Paste 2015</a>
                <a id="1mai" class="button">1 Mai</a>
            </div>

要过滤的DIVS：

 <div id="parent">
<div class="col-sm-4 paste">PASTE<div>
<div class="col-sm-4 paste">PASTE<div>
<div class="col-sm-4 paste">PASTE<div>
<div class="col-sm-4 paste">PASTE<div>
<div class="col-sm-4 paste">PASTE<div>
<div class="col-sm-4 paste">PASTE<div>
<div class="col-sm-4 paste">PASTE<div>
............................
<div class="col-sm-4 1mai">1 MAI<div>
<div class="col-sm-4 1mai">1 MAI<div>
 ............................     
    </div>

后退/下一步按钮

<ul class="pagination clearfix">
 <li class="prev"><a href="#">Inapoi</a></li>
 <li class="next"><a href="#">Inainte</a></li>
</ul>

jQuery是：

var $items = $('.col-sm-4');
var $btns = $('.button').click(function() {
  if (this.id == 'all') {
    $items.show();
  } else {
    var $el = $('.' + this.id).show();
    $items.not($el).hide();
  }
  $btns.removeClass('active');
  $(this).addClass('active');
})

类别按钮“粘贴2015”和“1 Mai”正在归档（按下按钮时只显示所需的div）

但是我需要在后面/下一个按钮上工作，并限制一次显示最大div为6。

感谢。

Answer 1

我已将class all 添加到每个div项目中。现在很容易按类过滤div。 Div用数字附加，只是为了使页面导航变得明显。没有漂亮的款式，但效果很好。

<div class="category-filter box">
  <a id="all" class="button">[ALL]</a>
  <a id="paste" class="button">[Paste 2015]</a>
  <a id="1mai" class="button">[1 Mai]</a>
</div>
<div id="parent">
  <div class="col-sm-4 paste all">PASTE 1</div>
  <div class="col-sm-4 paste all">PASTE 2</div>
  <div class="col-sm-4 paste all">PASTE 3</div>
  <div class="col-sm-4 paste all">PASTE 4</div>
  <div class="col-sm-4 paste all">PASTE 5</div>
  <div class="col-sm-4 paste all">PASTE 6</div>
  <div class="col-sm-4 paste all">PASTE 7</div>
  <div class="col-sm-4 paste all">PASTE 8</div>
  <div class="col-sm-4 paste all">PASTE 9</div>
  <div class="col-sm-4 paste all">PASTE 10</div>
  <div class="col-sm-4 paste all">PASTE 11</div>
  <div class="col-sm-4 paste all">PASTE 12</div>
  <div class="col-sm-4 paste all">PASTE 13</div>
  <div class="col-sm-4 paste all">PASTE 14</div>
  <div class="col-sm-4 1mai all">1 MAI 1</div>
  <div class="col-sm-4 1mai all">1 MAI 2</div>
</div>
<ul class="pagination clearfix">
  <li class="prev"><a href="#" id="prev_page">Prev</a></li>
  <li class="next"><a href="#" id="next_page">Next</a></li>
</ul>

以下是剧本：

$(document).ready(function() {
  var page;
  var items = $('.col-sm-4');
  var filtered_items;
  var page_size = 6;

  function get_filtered_items(filter) {
    return items.filter('.'.concat(filter));
  }

  function show_page(page) {
    items.hide();
    filtered_items.slice(page * page_size, (page + 1) * page_size).show();

    if (page > 0) {
      $('#prev_page').show();
    } else {
      $('#prev_page').hide();
    }
    if (page < Math.ceil(filtered_items.length / page_size) - 1) {
      $('#next_page').show();
    } else {
      $('#next_page').hide();
    }
  }

  var btns = $('.button').click(function() {
    btns.removeClass('active');
    $(this).addClass('active');

    page = 0;
    filtered_items = get_filtered_items(this.id);
    show_page(page);
  });

  $('#prev_page').click(function() {
    page--;
    show_page(page);
  });

  $('#next_page').click(function() {
    page++;
    show_page(page);
  });

  $('#all').click();
});

jQuery Filter divs By Class显示限制

1 个答案: