Question

我试图通过数据属性过滤div而不是使用同位素过滤...我不确定同位素是如何工作的，文档中似乎没有任何内容可以引用过滤数据属性而不只是类？！

我相信我会用自己的答案打击我自己......

但这就是我所拥有的：

var $grid = $('.isotope').isotope({
itemSelector: '.isotope-item'
});

$('#item-filter-select').on('change', function () {
  var el = this.value;
  $grid.isotope({ filter: el });  
});

<div id="filters">

    <h4>Geschenkideen</h4>
      <select id="item-filter-select">
        <option value="*" >Show All</option>
        <option value="clothes" >Clothing</option>
        <option value="jewelry" >Jewelry</option>
        <option value="misc" >Miscellaneous</option>
      </select>

</div>

<div class="isotope">

  <div class="isotope-item" data-price="23" data-type="misc">
    <img src="http://unit60.com/vendo/img/shop/1.jpg" />23
  </div>

   <div class="isotope-item" data-price="400" data-type="misc">
    <img src="http://unit60.com/vendo/img/shop/2.jpg" />400
  </div>

   <div class="isotope-item" data-price="12" data-type="jewelry">
    <img src="http://unit60.com/vendo/img/shop/3.jpg" />12
  </div>

   <div class="isotope-item clothes" data-price="8" data-type="clothes">
    <img src="http://unit60.com/vendo/img/shop/4.jpg" />8
  </div>

   <div class="isotope-item" data-price="144" data-type="misc">
    <img src="http://unit60.com/vendo/img/shop/5.jpg" />144
  </div>

   <div class="isotope-item" data-price="70" data-type="misc">
    <img src="http://unit60.com/vendo/img/shop/6.jpg" />70
  </div>

   <div class="isotope-item" data-price="445" data-type="jewlery">
    <img src="http://unit60.com/vendo/img/shop/3.jpg" />445
  </div>

   <div class="isotope-item" data-price="64" data-type="misc">
    <img src="http://unit60.com/vendo/img/shop/2.jpg" />64
  </div>

   <div class="isotope-item" data-price="21" data-type="misc">
    <img src="http://unit60.com/vendo/img/shop/5.jpg" />21
  </div>

   <div class="isotope-item" data-price="82.50" data-type="misc">
    <img src="http://unit60.com/vendo/img/shop/1.jpg" />82.50
  </div>

   <div class="isotope-item" data-price="25" data-type="jewelry">
    <img src="http://unit60.com/vendo/img/shop/3.jpg" />25
  </div>

   <div class="isotope-item" data-price="100" data-type="misc">
    <img src="http://unit60.com/vendo/img/shop/6.jpg" />100
  </div>

   <div class="isotope-item" data-price="30" data-type="misc">
    <img src="http://unit60.com/vendo/img/shop/2.jpg" />30
  </div>
</div>

codepen： http://codepen.io/unit60/pen/vXyAzj

HELLLLP !!! ：）

Answer 1

好吧......我有一个有效的答案，可能不是最优雅但我们去的地方：

 var $grid = $('.isotope').isotope({
 itemSelector: '[data-type]'
});

$('#item-filter-select').change( function () {
  var el = this.value;
  var fel;
  if(el!='*'){
   fel = "[data-type='" + el + "']"
 }else{
   fel = "*"
 }
 $grid.isotope({ filter: fel });  
});

Answer 2

是的...我稍微更改了代码，以便我可以组合过滤器：

var filters = {};
$('.item-filter-select').on( 'change',function() {
  var $this = $('option:selected');
  var $parent = $(this);
  var level = $(this).parent().find('select option:selected');
  // get group key
  var $buttonGroup = $parent.parents('.select-group');
  var filterGroup = $buttonGroup.attr('data-filter-group');
  // set filter for group
  filters[ filterGroup ] = level.data('value');
  // combine filters
  var filterValue = concatValues( filters );
  $grid.isotope({ filter: filterValue });  
});

// flatten object by concatting values
function concatValues( obj ) {
  var value = '';
  for ( var prop in obj ) {
    value += obj[ prop ];
  }
  return value;
}

更新了codepen：http://codepen.io/unit60/pen/ORbdWE

同位素过滤器使用带有数据的div的值 - *

2 个答案: