jquery-同位素过滤答案

【问题标题】：jquery-isotope filteringjquery-同位素过滤
【发布时间】：2012-02-13 07:32:21
【问题描述】：

我正在尝试使用同位素过滤项目。这些项目位于不同的 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;

   });

});

我做错了什么？

提前致谢

毛罗

【问题讨论】：

标签： jquery-isotope

【解决方案1】：

有了完整的代码，回答这个问题会更容易。

您当前的代码缺少过滤器链接$('#filters li a')，问题可能只是您忘记在选择器前面添加.。

另外，如果这是您所有的 javascript，那么您调用 isotope 的顺序错误，即您试图在初始化 isotope 之前重新加载项目。

修正后的 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 来显示结果。

【讨论】：