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向您展示结果。