jquery同位素过滤

发布于 2024-12-27 13:49:59 字数 985 浏览 1 评论 0原文

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

   });

});

我做错了什么？

预先感谢

毛罗

原文

I'm trying to filter items with isotope. These items are inside in different divs, but for some reason the filter works only for the first div. here's my code:

<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>

my 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;

   });

});

What am I doing wrong?

Thanks in advance

Mauro

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

盗琴音 2025-01-03 13:49:59

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

您当前的代码缺少过滤器链接 $('#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;
});

我已经设置了一个工作 jsFiddle 来向您展示结果。

With the complete code it would be easier to answer this.

Your current code is missing the filters links $('#filters li a') and the problem could simply be you are forgetting to add a . to the front of your selector.

Also, if this is all of your javascript, you are calling isotope in the wrong order, i.e. you are trying to reload the items before you have initialized isotope.

The corrected JS looks like this:

// 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;
});

I've set up a working jsFiddle to show you the result.

回复收藏 0 原文

~没有更多了~