Question

我正在尝试模仿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 );        
    });

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

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

每次使用时按数据属性和重置过滤器过滤对象

2 个答案: