通过数据属性筛选对象，并在每次使用时重置筛选器

Question

我试图模仿JQuery的同位素插入的过滤功能，因为我需要过滤图像，但是，实际上使用同位素会给页面上的一些视差尖头元素带来问题。

我编写了这个简短的JQuery片段来切换没有数据属性data-filter的图像。除了Packery插件在不匹配的条目被删除后不会重新排序这一事实之外，它还可以正常工作。

我遇到的问题是，一旦单击了另一个筛选器链接，就需要重新设置过滤器，就好像单击了另一个筛选器一样，然后第一个筛选的元素就消失了，所有其他元素(除外)过滤后的元素都会被返回。我确信解决方案很简单，但是我对JQuery的知识非常有限，所以不知道如何处理这个问题。

代码

$("#filters a").click(function()    {
        var type = $(this).attr('data-filter');
        $('img').not('[data-filter="'+type+'"]').toggle( 1000 );        
    });

我也没有办法用一个链接将所有元素返回到可见状态，任何帮助都非常感谢。

Answer 1

我认为你不想用切换来实现这个功能。您可能可以使用特定的隐藏和显示的不同，做或不适合过滤器类型。如下所示：

$("#filters a").click(function()    {
    var type = $(this).attr('data-filter'),
        $img = $( 'img' );

    $img.filter( '[data-filter="'+type+'"]' ).show( 1000 );
    $img.not( '[data-filter="'+type+'"]' ).hide( 1000 );
});

然后，要重置所有筛选器，只需在事件中使用单独的事件或条件，只需执行以下操作来显示所有图像：

$img.show( 1000 );

Answer 2

根据.toggle()，您可以使用toggle(true)显示所有元素

$("#filters a").click(function() {
        var type = $(this).attr('data-filter');
        $('img').toggle(true).not('[data-filter="'+type+'"]').toggle( 1000 );        
});

JSFiddle