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

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

我建议您不要删除ALL按钮，而是将其保留，这样您就可以在对所有图片进行过滤后进行预览。

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

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

JS Fiddle with an implemented example.

删除投资组合过滤器中的“全部”按钮，并在JavaScript

1 个答案: