Question

我设法使用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'将不会......直到你重新加载。
有没有什么方法可以让两个过滤器同时工作？

Answer 1

你会以某种方式需要实施砌体的重新触发。但是this way of filtering只是简单而灵活，因为它也允许组合过滤器。

$(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
    });
});

});

更新：有关在隐藏/显示项目（博客帖子）后还需要重新布局的用户，请参阅这个两年前的sort of a "hack" by the developer。他的解决方案是仅将砖石应用于可见元素。

Answer 2

是的，我确实计划进一步使用同位素插件，但由于我有点时间推动，我只是想让这个过滤器工作以节省我更改我的其余代码。无论如何重新触发砖石？甚至将班级从“.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'的内容，似乎根本无法解决。

砌体过滤器只工作一次

2 个答案: