删除投资组合过滤器中的“全部”按钮，并在JavaScript中自动显示特定过滤器按钮

Question

我尝试使用过滤器显示投资组合图像，但我想删除“全部”按钮并自动显示特定的过滤器按钮。

我参考了这个链接

filter.js

$(".filter-button").click(function(){
        var value = $(this).attr('data-filter');

        if(value == "all")
        {
            //$('.filter').removeClass('hidden');
            $('.filter').show('1000');
        }
        else
        {
//            $('.filter[filter-item="'+value+'"]').removeClass('hidden');
//            $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');
            $(".filter").not('.'+value).hide('3000');
            $('.filter').filter('.'+value).show('3000');

        }
    });

HTML

<div id="portfolio">
            <section class="header">
                <h1 class="heading">Our Work</h1>
                <span>A taste of our creativity</span>
            </section>

            <!-- EDIT -->

            <div align="center">
                <button class="btn btn-default filter-button" data-filter="towera">Tower A</button>
                <button class="btn btn-default filter-button" data-filter="towerb">Tower B</button>
                <button class="btn btn-default filter-button" data-filter="3d">3D Unit</button>
            </div>

我怎样才能做到这一点？

Answer 1

你真的在实现这个目标的正确道路上。 您已经在button类中更改了data-filter 。

我建议不要删除ALL按钮，而是保留它，这样您就可以在过滤后预览所有图像。

您提供的jquery代码几乎是相同的，示例之间的唯一区别是您必须更改链接中的图像和button类中的标记。

这是一个JS Fiddle与几乎相同的例子，只是更改了过滤器名称。

JS Fiddle有一个实现的例子。