jquery同位体 - ソート、レイアウト、複数のフィルタ

Question

ソート、レイアウトボタン、および複数のフィルタを含むページを作成しようとしています。アイソトープのホームページは良い例ですが、そこには1つのフィルターしかありません。そのページを使用して、一緒に機能するフィルタを追加する方法（色とサイズ、一緒に作業するのではなく、一度に1つ）を理解することはできません。以下はコードです...別のフィルターを追加するには？

<div class="option-combo"> 
    <h2>Filter:</h2> 
    <ul id="filter" class="option-set clearfix" data-option-key="filter"> 
    <li><a href="#show-all" data-option-value="*" class="selected">show all</a></li> 
    <li><a href="#elements" data-option-value=".element:not(.feature)">elements</a></li> 
    <li><a href="#features" data-option-value=".feature">features</a></li> 
    <li><a href="#examples" data-option-value=".example">examples</a></li> 
    </ul> 
</div> 

<div class="option-combo"> 
    <h2>Sort:</h2> 
    <ul id="sort" class="option-set clearfix" data-option-key="sortBy"> 
    <li><a href="#sortBy=original-order" data-option-value="original-order" data>original-order</a></li> 
    <li><a href="#sortBy=name" data-option-value="name">name</a></li> 
    <li><a href="#sortBy=year" data-option-value="year" class="selected">year</a></li> 
    <li><a href="#sortBy=size" data-option-value="size">size</a></li> 
    <li><a href="#sortBy=random" data-option-value="random">random</a></li> 
    </ul> 
</div> 

<div class="option-combo"> 
    <h2>Layout: </h2> 
    <ul id="layouts" class="option-set clearfix" data-option-key="layoutMode"> 
    <li><a href="#masonry" data-option-value="masonry" class="selected">masonry</a></li> 
    <li><a href="#fitRows" data-option-value="fitRows">fitRows</a></li> 
    <li><a href="#straightDown" data-option-value="straightDown">straightDown</a></li> 
    </ul> 
</div> 

そしてこれはjavascriptのである：私は複数のプロパティを共有する選択要素を意味理解し

$(function(){ 

    var $container = $('#container'); 

    $container.isotope({ 
    masonry: { 
     columnWidth: 70 
    }, 
    sortBy: 'year', 
    sortAscending : false, 
    getSortData: { 
     name : function ($elem) { 
     return $elem.find('.name').text(); 
     }, 
     size : function ($elem) { 
     return parseInt($elem.find('.Size').text().replace(/,/g, ''), 10); 
     }, 
     year : function ($elem) { 
     return parseInt($elem.find('.year').text().replace(/,/g, ''), 10); 
     } 
    } 
    }); 


    var $optionSets = $('#options .option-set'), 
     $optionLinks = $optionSets.find('a'); 

    $optionLinks.click(function(){ 
    var $this = $(this); 
    // don't proceed if already selected 
    if ($this.hasClass('selected')) { 
     return false; 
    } 
    var $optionSet = $this.parents('.option-set'); 
    $optionSet.find('.selected').removeClass('selected'); 
    $this.addClass('selected'); 

    // make option object dynamically, i.e. { filter: '.my-filter-class' } 
    var options = {}, 
     key = $optionSet.attr('data-option-key'), 
     value = $this.attr('data-option-value'); 
    // parse 'false' as false boolean 
    value = value === 'false' ? false : value; 
    options[ key ] = value; 
    if (key === 'layoutMode' && typeof changeLayoutMode === 'function') { 
     // changes in layout modes need extra logic 
     changeLayoutMode($this, options) 
    } else { 
     // otherwise, apply new options 
     $container.isotope(options); 
    } 

    return false; 
    }); 

}); 

Answer 1

複数のフィルタ。

だから、赤や 大きな

• 赤、ビッグあり、例えば、我々は、以下の同位体の項目

  <div class="isotope-item green big"></div> 
  <div class="isotope-item green small"></div> 
  <div class="isotope-item red big"></div> 
  <div class="isotope-item red small"></div> 
  <div class="isotope-item yellow big"></div> 
  

  を持っている場合は、フィルタとする場合は、すべての要素

あなたはあなたと同じJavaScriptを使用することができます：

<h2>Filter:</h2> 
<ul id="filter" class="option-set clearfix" data-option-key="filter"> 
    <li><a data-option-value="*" class="selected">Show All</a></li> 
    <li><a data-option-value=".red">Show Red Elements</a></li> 
    <li><a data-option-value=".big">Show Big Elements</a></li> 
    <li><a data-option-value=".red, big">Show Elements Red OR Big</a></li> 
    <li><a data-option-value=".red.big">Show Elements Red AND Big</a></li> 
</ul> 

このフィルタは、単純なjQueryセレクタで動作します。選択に一致するすべてが表示され、残りは非表示になります。

Answer 2

私はこの質問hereの私のアプローチを説明しようとしました。
基本的には、アイソトープ関数をonclickイベントで適切に使用して、制限的なAND条件を探すことです。