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

Question

我正在尝试模仿 JQuery 同位素插件的过滤功能，因为我需要过滤图像，但实际使用 Isotope 会导致页面上的一些视差元素出现问题。

我编写了这个简短的 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

根据 jQuery - .toggle() ，你可以用toggle(true)显示所有元素

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

JSFiddle