jQuery同位素過濾沒有隱藏項目

我想在我正在構建的網站上使用jQuery同位素插件（http://isotope.metafizzy.co）。在本質上我想要做的是過濾結果，我已經設法做到了。但是，當我過濾結果時，我不希望其他結果消失，我只想過濾選項來到前面。jQuery同位素過濾沒有隱藏項目

我一直在爲此撓了撓頭。這裏是我的jQuery：

$(function(){ 

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

    $container.isotope({ 
    itemSelector : '.blank' 
    }); 


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

    $optionLinks.click(function(){ 
    var $this = $(this); 

    if ($this.hasClass('selected')) { 
     return false; 
    } 
    var $optionSet = $this.parents('.option-set'); 
    $optionSet.find('.selected').removeClass('selected'); 
    $this.addClass('selected'); 

    var options = {}, 
     key = $optionSet.attr('data-option-key'), 
     value = $this.attr('data-option-value'); 

    value = value === 'false' ? false : value; 
    options[ key ] = value; 
    if (key === 'layoutMode' && typeof changeLayoutMode === 'function') { 

     changeLayoutMode($this, options) 
    } else { 

     $container.isotope(options); 
    } 

    return false; 
    });  
});

和我（簡體）HTML：

<section id="options" class="clearfix"> 
<ul id="filters" class="option-set clearfix" data-option-key="filter"> 
    <li><a href="#filter" data-option-value="*" class="selected">show all</a></li> 
    <li><a href="#filter" data-option-value=".christmas">Christmas</a></li> 
    <li><a href="#filter" data-option-value=".birthday">Birthday</a></li> 
    <li><a href="#filter" data-option-value=".thank-you">Thank You</a></li> 
    </ul>

<div id="cards"> 
<div class="blank christmas"></div> 
<div class="blank christmas"></div> 
<div class="blank christmas"></div> 
<div class="blank christmas"></div> 
<div class="blank birthday"></div> 
<div class="blank birthday"></div> 
<div class="blank birthday"></div> 
<div class="blank thank-you"></div> 
<div class="blank thank-you"></div>

和的jsfiddle的鏈接（雖然動畫不似乎工作 - 但它適用於我的網站，所以沒有問題）：http://jsfiddle.net/Yvv5x/3/

任何幫助w不勝感激。

來源

2013-09-25 Sam Skirrow

與問題無關，但有一個非常棒的插件可用於創建與動畫完全相同的效果。 [檢查出來]（http://mixitup.io/）。 –

這裏是工作fiddle。

你並不需要過濾，但排序。因此，我創建了三種不同的排序情況（聖誕節，生日和謝謝）以及每個項目的相應data- *屬性（最終您可以通過代碼設置此屬性）。

此外，還分別致電

$container.isotope({ 
    itemSelector : '.blank' 
});

之初，沒有所有需要的選項。

來源

2013-11-30 16:24:55 alexcasalboni

jQuery同位素過濾沒有隱藏項目

回答

相關問題