网格上的嵌套过滤器

Question

我买了这个脚本，很容易设置多个过滤器。但我需要它嵌套。那么这个脚本可以嵌套吗？我正在寻找的是根据＃isotope-type-filters中选择的选项获得＃isotope-cat-filters。它根据类进行过滤。

这是Javascript代码

// bind filter button click
$('#isotope-type-filters').on( 'click', 'button', function() {
    var filterValue = $( this ).attr('data-filter');
    // use filterFn if matches value
    filterValue = filterFns[ filterValue ] || filterValue;
    $grid.isotope({ filter: filterValue });
});

// bind filter button click
$('#isotope-cat-filters').on( 'click', 'button', function() {
    var filterValue = $( this ).attr('data-filter');
    // use filterFn if matches value
    filterValue = filterFns[ filterValue ] || filterValue;
    $grid.isotope({ filter: filterValue });
});

filterFns（编辑）

// filter functions
var filterFns = {
  // show if number is greater than 50
  numberGreaterThan50: function() {
    var number = $(this).find('.number').text();
    return parseInt( number, 10 ) > 50;
  },
  // show if name ends with -ium
  ium: function() {
    var name = $(this).find('.name').text();
    return name.match( /ium$/ );
  }
};

这是HTML。

<!-- Isotope Gallery -->
<div class="isotope-header">
    <h2>Referenser</h2>
    <div id="isotope-type-filters" class="isotope-button-group">
      <button class="link is-checked" data-filter="*">show all</button>
      <button class="link" data-filter=".ongoing">Ongoing project</button>
      <button class="link" data-filter=".finished">Finished project</button>
    </div>

    <div id="isotope-cat-filters" class="isotope-button-group">
      <button class="link is-checked" data-filter="*">show all</button>
      <button class="link" data-filter=".design">design</button>
      <button class="link" data-filter=".development">development</button>
      <button class="link" data-filter=".construction">construction</button>
    </div>
</div>

<!-- Isotope Grid -->
<div class="isotope-grid">

  <!-- Isotope Grid-Item -->
  <div class="isotope-grid-item grid-box ongoing design">
        <div class="isotope-item">
          <a href="#"><div class="isotope-feature-image"><img src="uploads/projects/grid_img_240x133.jpg" class="img-responsive center-block"></div>
          <h3 class="isotope-title">UI-UX Design</h3></a>
        </div>
  </div>
  <!-- Isotope Grid-Item -->

  <!-- Isotope Grid-Item -->
  <div class="isotope-grid-item grid-box ongoing development ">
    <div class="isotope-item">
          <a href="#"><div class="isotope-feature-image"><img src="uploads/projects/grid_img_240x133.jpg" class="img-responsive center-block"></div>
      <h3 class="isotope-title">Responsive Design</h3></a>
    </div>
  </div>
  <!-- Isotope Grid-Item -->

  <!-- Isotope Grid-Item -->
  <div class="isotope-grid-item grid-box finished development ">
    <div class="isotope-item">
          <a href="#"><div class="isotope-feature-image"><img src="uploads/projects/grid_img_240x133.jpg" class="img-responsive center-block"></div>
      <h3 class="isotope-title">Cross Browser</h3></a>
    </div>
  </div>
  <!-- Isotope Grid-Item -->

  <!-- Isotope Grid-Item -->
  <div class="isotope-grid-item grid-box finished construction development ">
    <div class="isotope-item">
          <a href="#"><div class="isotope-feature-image"><img src="uploads/projects/grid_img_240x133.jpg" class="img-responsive center-block"></div>
      <h3 class="isotope-title">SEO Friendly</h3></a>
    </div>
  </div>
  <!-- Isotope Grid-Item -->

  <!-- Isotope Grid-Item -->
  <div class="isotope-grid-item grid-box ongoing development ">
    <div class="isotope-item">
          <a href="#"><div class="isotope-feature-image"><img src="uploads/projects/grid_img_240x133.jpg" class="img-responsive center-block"></div>
      <h3 class="isotope-title">Bug and Error Free</h3></a>
    </div>
  </div>
  <!-- Isotope Grid-Item -->

</div>