带 select 的同位素组合过滤器（下拉菜单）

Question

我正在尝试使用 2 个 select 下拉菜单来显示我的同位素网格的过滤选项。

我一直在尝试按照 Isotope 文档进行过滤，但是当涉及到 2 个 select 菜单时我有点卡住了。文档仅提供多组按钮组合在一起工作的示例（不是 selects）

这是我目前的工作：https://codepen.io/whitinggg/pen/pLMdWB

如果您从第一个 select 菜单 select "Sector One" 和第二个 select 菜单的 "Service Two"，您就会看到我的问题。过滤不是将选项组合在一起，而是显示所有结果。

任何人都可以帮助我修复 JS 以将两个 select 组合在一起以显示正确的结果吗？

HTML
<div class="grid-filter">

  <select class="filters-select">
    <option value="*">All Sectors</option>
    <option value=".sector-one">Sector One</option>
    <option value=".sector-two">Sector Two</option>
  </select>

  <select class="filters-select">
    <option value="*">All Services</option>
    <option value=".service-one">Service One</option>
    <option value=".service-two">Service Two</option>
  </select>

</div>

<div class="grid">

  <div class="grid-sizer"></div>
  <div class="gutter-sizer"></div>

  <div class="grid-item service-one sector-one">
    <div class="item-cover">
      <div class="item-cover-img">
        <img src="https://picsum.photos/800/400">
      </div>
      <div class="item-cover-caption">
        <div class="">
          <p>Project 1</p>
        </div>
        <div class="">
          <p><a>Icon</a></p>
        </div>
      </div>
    </div>
    <div class="item-content">
      <div class="">
        <h1>Project Title</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor dui, pretium id est quis, aliquam fermentum diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas risus augue, pretium ac ornare sit amet, suscipit at massa. Mauris non leo molestie, pellentesque lacus vel, lobortis dolor. Nunc fermentum sollicitudin arcu sit amet cursus. Morbi eu risus gravida, finibus augue iaculis, luctus massa. Ut sit amet aliquet nisl. Suspendisse tincidunt accumsan est, luctus pretium nulla condimentum ac. Donec vel diam nec augue mattis vulputate. Nulla facilisi. In velit magna, venenatis id enim feugiat, convallis pulvinar neque. Fusce id accumsan orci, quis fringilla tellus. Curabitur non ligula sed orci semper sodales. Nunc quis porta leo, vel condimentum lacus.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor dui, pretium id est quis, aliquam fermentum diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas risus augue, pretium ac ornare sit amet, suscipit at massa. Mauris non leo molestie, pellentesque lacus vel, lobortis dolor. Nunc fermentum sollicitudin arcu sit amet cursus. Morbi eu risus gravida, finibus augue iaculis, luctus massa. Ut sit amet aliquet nisl. Suspendisse tincidunt accumsan est, luctus pretium nulla condimentum ac. Donec vel diam nec augue mattis vulputate. Nulla facilisi. In velit magna, venenatis id enim feugiat, convallis pulvinar neque. Fusce id accumsan orci, quis fringilla tellus. Curabitur non ligula sed orci semper sodales. Nunc quis porta leo, vel condimentum lacus.</p>
      </div>
      <div class="">
        <img src="https://picsum.photos/800/400" class="">
      </div>
    </div>
  </div>

  <div class="grid-item service-two sector-one">
    <div class="item-cover">
      <div class="item-cover-img">
        <img src="https://picsum.photos/800/400">
      </div>
      <div class="item-cover-caption">
        <div class="">
          <p>Project 2</p>
        </div>
        <div class="">
          <p><a>Icon</a></p>
        </div>
      </div>
    </div>
    <div class="item-content">
      <div class="">
        <h1>Project Title</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor dui, pretium id est quis, aliquam fermentum diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas risus augue, pretium ac ornare sit amet, suscipit at massa. Mauris non leo molestie, pellentesque lacus vel, lobortis dolor. Nunc fermentum sollicitudin arcu sit amet cursus. Morbi eu risus gravida, finibus augue iaculis, luctus massa. Ut sit amet aliquet nisl. Suspendisse tincidunt accumsan est, luctus pretium nulla condimentum ac. Donec vel diam nec augue mattis vulputate. Nulla facilisi. In velit magna, venenatis id enim feugiat, convallis pulvinar neque. Fusce id accumsan orci, quis fringilla tellus. Curabitur non ligula sed orci semper sodales. Nunc quis porta leo, vel condimentum lacus.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor dui, pretium id est quis, aliquam fermentum diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas risus augue, pretium ac ornare sit amet, suscipit at massa. Mauris non leo molestie, pellentesque lacus vel, lobortis dolor. Nunc fermentum sollicitudin arcu sit amet cursus. Morbi eu risus gravida, finibus augue iaculis, luctus massa. Ut sit amet aliquet nisl. Suspendisse tincidunt accumsan est, luctus pretium nulla condimentum ac. Donec vel diam nec augue mattis vulputate. Nulla facilisi. In velit magna, venenatis id enim feugiat, convallis pulvinar neque. Fusce id accumsan orci, quis fringilla tellus. Curabitur non ligula sed orci semper sodales. Nunc quis porta leo, vel condimentum lacus.</p>
      </div>
      <div class="">
        <img src="https://picsum.photos/800/400" class="">
      </div>
    </div>
  </div>

  <div class="grid-item service-two sector-two">
    <div class="item-cover">
      <div class="item-cover-img">
        <img src="https://picsum.photos/800/400">
      </div>
      <div class="item-cover-caption">
        <div class="">
          <p>Project 3</p>
        </div>
        <div class="">
          <p><a>Icon</a></p>
        </div>
      </div>
    </div>
    <div class="item-content">
      <div class="">
        <h1>Project Title</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor dui, pretium id est quis, aliquam fermentum diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas risus augue, pretium ac ornare sit amet, suscipit at massa. Mauris non leo molestie, pellentesque lacus vel, lobortis dolor. Nunc fermentum sollicitudin arcu sit amet cursus. Morbi eu risus gravida, finibus augue iaculis, luctus massa. Ut sit amet aliquet nisl. Suspendisse tincidunt accumsan est, luctus pretium nulla condimentum ac. Donec vel diam nec augue mattis vulputate. Nulla facilisi. In velit magna, venenatis id enim feugiat, convallis pulvinar neque. Fusce id accumsan orci, quis fringilla tellus. Curabitur non ligula sed orci semper sodales. Nunc quis porta leo, vel condimentum lacus.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor dui, pretium id est quis, aliquam fermentum diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas risus augue, pretium ac ornare sit amet, suscipit at massa. Mauris non leo molestie, pellentesque lacus vel, lobortis dolor. Nunc fermentum sollicitudin arcu sit amet cursus. Morbi eu risus gravida, finibus augue iaculis, luctus massa. Ut sit amet aliquet nisl. Suspendisse tincidunt accumsan est, luctus pretium nulla condimentum ac. Donec vel diam nec augue mattis vulputate. Nulla facilisi. In velit magna, venenatis id enim feugiat, convallis pulvinar neque. Fusce id accumsan orci, quis fringilla tellus. Curabitur non ligula sed orci semper sodales. Nunc quis porta leo, vel condimentum lacus.</p>
      </div>
      <div class="">
        <img src="https://picsum.photos/800/400" class="">
      </div>
    </div>
  </div>

  <div class="grid-item service-two sector-two">
    <div class="item-cover">
      <div class="item-cover-img">
        <img src="https://picsum.photos/800/400">
      </div>
      <div class="item-cover-caption">
        <div class="">
          <p>Project 4</p>
        </div>
        <div class="">
          <p><a>Icon</a></p>
        </div>
      </div>
    </div>
    <div class="item-content">
      <div class="">
        <h1>Project Title</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor dui, pretium id est quis, aliquam fermentum diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas risus augue, pretium ac ornare sit amet, suscipit at massa. Mauris non leo molestie, pellentesque lacus vel, lobortis dolor. Nunc fermentum sollicitudin arcu sit amet cursus. Morbi eu risus gravida, finibus augue iaculis, luctus massa. Ut sit amet aliquet nisl. Suspendisse tincidunt accumsan est, luctus pretium nulla condimentum ac. Donec vel diam nec augue mattis vulputate. Nulla facilisi. In velit magna, venenatis id enim feugiat, convallis pulvinar neque. Fusce id accumsan orci, quis fringilla tellus. Curabitur non ligula sed orci semper sodales. Nunc quis porta leo, vel condimentum lacus.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor dui, pretium id est quis, aliquam fermentum diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas risus augue, pretium ac ornare sit amet, suscipit at massa. Mauris non leo molestie, pellentesque lacus vel, lobortis dolor. Nunc fermentum sollicitudin arcu sit amet cursus. Morbi eu risus gravida, finibus augue iaculis, luctus massa. Ut sit amet aliquet nisl. Suspendisse tincidunt accumsan est, luctus pretium nulla condimentum ac. Donec vel diam nec augue mattis vulputate. Nulla facilisi. In velit magna, venenatis id enim feugiat, convallis pulvinar neque. Fusce id accumsan orci, quis fringilla tellus. Curabitur non ligula sed orci semper sodales. Nunc quis porta leo, vel condimentum lacus.</p>
      </div>
      <div class="">
        <img src="https://picsum.photos/800/400" class="">
      </div>
    </div>
  </div>
</div>

CSS
* { box-sizing: border-box; }

body {
  font-family: sans-serif;
}

/* ---- grid ---- */

.grid {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-item {
  float: left;
  width: 49%;
}

.grid-item img {
  width: 100%;
}

.grid-item:hover {
  cursor: pointer;
}

.grid-item.gigante {
  width: 99%;
  background-color: grey;
}

.grid-sizer {
  width: 50%;
}

.gutter-sizer {
  width: 1%;
}

.grid-item-content {
  display: none;
}

.item-cover-caption {
    position: absolute;
    bottom: 4px;
    width: 100%;
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    padding: 0 20px;
    background-color: #2479ffa3;
}


.grid-item.gigante .item-cover {
    display: none;
}

.item-content {
    display: none;
}

.grid-item.gigante .item-content {
    display: flex;
}

.grid-item.gigante .item-content div {
    width: 50%;
    padding: 20px;
}

.grid-filter {
    max-width: 1200px;
    margin: 20px auto;
}

JS
// external js: isotope.pkgd.js

var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'packery',
  columnWidth: '.grid-sizer',
  packery: {
    gutter: '.gutter-sizer'
  }
});

$grid.on( 'click', '.grid-item', function() {
  // change size of item by toggling gigante class
  $( this ).toggleClass('gigante');
  $grid.isotope('layout');
});

var filterFns = $('.filters-select').on( 'change', function() {
  // get filter value from option value
  var filterValue = this.value;
  // use filterFn if matches value
  filterValue = filterFns[ filterValue ] || filterValue;
  $grid.isotope({ filter: filterValue });
});

Answer 1

发布问题后，我继续浏览文档和示例。这导致以下代码解决了我的问题。

$(function() {
    var $container = $('.grid'),
        $select = $('div#filterGroup select');
    filters = {};

    $container.isotope({
        itemSelector: '.grid-item'
    });
        $select.change(function() {
        var $this = $(this);

        var $optionSet = $this;
        var group = $optionSet.attr('data-filter-group');
    filters[group] = $this.find('option:selected').attr('data-filter-value');

        var isoFilters = [];
        for (var prop in filters) {
            isoFilters.push(filters[prop])
        }
        var selector = isoFilters.join('');

        $container.isotope({
            filter: selector
        });

        return false;
    });

});

带 select 的同位素组合过滤器（下拉菜单）

Isotope combination filters with select (dropdown)

html

javascript

jquery

jquery-masonry

jquery-isotope