0

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

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

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

代码

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

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

4

2 回答 2

2

我认为您不想为该功能使用切换。您可能可以专门为适合或不适合过滤器类型的不同使用隐藏和显示。像这样：

$("#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 );
于 2013-12-31T16:31:29.800 回答
1

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

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

JSFiddle

于 2013-12-31T16:13:22.973 回答