jquery同位素過濾

Question

我試圖用同位素過濾項目。這些項目位於不同的div中，但由於某些原因，過濾器僅適用於第一個div。這裏是我的代碼：

<div id="articles"> 
    <div class="article-wrap"> 
     <div class="article cat-1"></div> 
     <div class="article cat-2"></div> 
     <div class="article cat-3"></div> 
     ... 
    </div> 
    <div class="article-wrap"> 
     <div class="article cat-1"></div> 
     <div class="article cat-2"></div> 
     <div class="article cat-3"></div> 
     ... 
    </div> 
</div> 

我的javascript：

$(document).ready(function() { 

    $('#articles .article-wrap').isotope('reloadItems').isotope({sortBy: 'class'}); 

    $('#filters li a').click(function(){ 

      var selector = $(this).attr('data-filter'); 

      $('#articles .article-wrap').isotope({ filter: selector }); 

      return false; 

    }); 

}); 

我在做什麼錯？

在此先感謝

莫羅

Answer 1

有了完整的代碼，它會更容易回答這個問題。

您當前的代碼缺少過濾器鏈接$('#filters li a')，問題可能僅僅是您忘記將.添加到選擇器的前端。另外，如果這是你所有的javascript，你調用同位素的順序是錯誤的，也就是說你在初始化同位素之前嘗試重新加載項目。

修正JS是這樣的：

// Only the line below has been altered, the rest is shown for completeness' sake 
$('#articles .article-wrap').isotope({sortBy: 'class'}).isotope('reloadItems'); 

$('#filters li a').click(function(){ 
    var selector = '.' + $(this).attr('data-filter'); 

    $('#articles .article-wrap').isotope({ filter: selector }); 

    return false; 
}); 

我已經設置了a working jsFiddle向您展示結果。