Filter 同位素过滤器使用DIV上的值和数据-*

我试图通过数据属性而不是使用同位素类来过滤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>

var$grid=$（'.同位素'）。同位素({
itemSelector:“.同位素项目”
});
$（“#项目筛选器选择”）。在（'change'，函数（）上{
var el=该值；
$grid.同位素（{filter:el}）；
});
格申基丁
全部展示
服装
珠宝
混杂的
23
400
12
8.
144
70
445
64
21
82.50
25
100
30

代码笔：

---

Helllp！！！：）

好的。。。我有一个有效的答案，可能不是最优雅的，但我们来看看：

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

---

耶。。。我稍微更改了代码，以便可以组合过滤器：

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

---

更新的代码笔：

我已将itemSelector更改为“[data type]”，但仍然没有：(