javascript - 删除投资组合过滤器中的 "all"按钮并在 JavaScript 中自动显示特定过滤器按钮

Question

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

我引用了 this link

过滤器.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 中的标签类(class)。

这是一个 JS Fiddle，示例几乎相同，只是过滤器名称发生了变化。

JS Fiddle with an implemented example.