jquery同位素 - 排序，佈局和多個過濾器

Question

我想創建一個排序，佈局按鈕和多個過濾器的頁面。同位素主頁就是一個很好的例子，但那裏只有一個過濾器。使用該頁面我無法弄清楚如何添加更多可以一起工作的濾鏡（即顏色和大小，一起工作，而不是一次一個）。以下是代碼...我如何添加另一個過濾器？

<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條件。