0

我已经设法使用 jQuery Masonry 插件让多个过滤器工作，唯一的问题是一旦你使用了一个过滤器，你就不能使用另一个过滤器，直到你重新加载（忍受我，我对此还是很陌生）。这是我的代码：

jQuery('#menu1').click(function() {
      var menu = $(this).attr('menuref');
      jQuery('.pics').removeClass('pics').addClass('.hidden').hide().filter("[imageref='" + menu + "']").removeClass('.hidden').addClass('pics').show();
      jQuery('#projectimages').masonry('reload');
});

jQuery('#menu2').click(function() {
      var menu = $(this).attr('menuref');
      jQuery('.pics').removeClass('pics').addClass('.hidden').hide().filter("[imageref='" + menu + "']").removeClass('.hidden').addClass('pics').show();
      jQuery('#projectimages').masonry('reload');
});

所以有我的 2 个过滤器，这是我上传到服务器上的模板来演示我的意思：http
://nealfletcher.co.uk/testing-testing/ 单击“过滤器 1”将成功过滤掉相关内容并按照指定重新加载砌体插件，但是如果您然后单击“过滤器 2”，它只会隐藏所有内容，反之亦然，如果您先单击“过滤器 2”，则可以使用，然后“过滤器 1”不会。 ..直到你重新加载。
有什么办法可以让两个过滤器同时工作？

4

2 回答 2

0

您将需要以某种方式重新触发 Masonry。但是这种过滤方式非常简单和灵活，因为它也允许组合过滤器。

$(function() {

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

$container.isotope({
    itemSelector: '.item',
    masonry: {
        columnWidth: your least common divisor in pixels here
    }
});

$('#filters').on('click', 'a', function() {
    var selector = $(this).data('filter');
    $container.isotope({
        filter: selector
    });
});

});

更新：请参阅开发人员关于在隐藏/显示项目（博客文章）后还需要重新布局的用户的这种两年前的“黑客” 。他的解决方案是将砌体仅应用于可见元素。

于 2012-10-23T12:18:30.290 回答
0

是的，我确实计划进一步使用同位素插件，但由于我有点赶时间，我只是想让这个过滤器工作以节省我更改其余代码的时间。反正有没有重新触发砌体？即使将课程从“.hidden”改回“.pics”似乎也不起作用。任何建议将不胜感激？

jQuery('#menu1').click(function() {
      var menu = $(this).attr('menuref');
      jQuery('.pics').removeClass('pics').addClass('.hidden').hide().filter("[imageref='" + menu + "']").removeClass('.hidden').addClass('pics').show();
      jQuery('#projectimages').masonry('reload');
});

jQuery('#menu2').click(function() {
      var menu = $(this).attr('menuref');
      jQuery('.pics').removeClass('pics').addClass('.hidden').hide().filter("[imageref='" + menu + "']").removeClass('.hidden').addClass('pics').show();
      jQuery('#projectimages').masonry('reload');
});

两者都是我的过滤器都在自己工作，但是当一个接一个使用时，它只会隐藏所有“.pics”内容，似乎根本无法弄清楚。

于 2012-10-23T22:45:36.673 回答