Question

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

我一直试图在过滤时遵循Isotope文档，但是当涉及到2个选择菜单时，我有点卡住了。文档仅提供了多组按钮组合在一起（不是选择）的示例

到目前为止，我的工作是：https://codepen.io/whitinggg/pen/pLMdWB

如果您选择＆＃34;第一部门＆＃34;从第一个选择，＆＃34;服务二＆＃34;从第二个选择菜单，你会看到我的问题。过滤不是将选项组合在一起，而是显示所有结果。

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

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

});

具有选择（下拉）的同位素组合过滤器

1 个答案: