同位素過濾器使用值與數據的div - *

我試圖通過數據屬性而不是類使用同位素過濾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>

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

HELLLLP！ :)

來源

2016-09-21 Morgan

IVE改變了itemSelector到 '[數據 - 類型]'，但仍然沒有雪茄:( – Morgan

確定...我有一個答案的作品，可能不是最優雅，但在這裏我們去：

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

來源

2016-09-21 13:53:17 Morgan

耶......我改變了代碼一點，這樣我可以合併過濾器：

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

來源

2016-09-22 10:32:57 Morgan

同位素過濾器使用值與數據的div - *

回答

相關問題