divs에 데이터 값이있는 동위 원소 필터 -

Question

isotope를 사용하는 클래스가 아닌 데이터 속성으로 div를 필터링하려고합니다 ... isotope가 작동하는 방식을 잘 모르지만 문서에서 데이터 필터링 필터링을 참조하는 항목이없는 것으로 보입니다. 수업뿐만 아니라?!

내가 대답으로 내 자신을 때리는 것이라는 점을 확실 임 ... 그러나 이것은 지금까지 내가 가지고 같다

:

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