javascript - 为什么我的作品集图库过滤不正确？

Question

我创建了一个投资组合图库，我想添加一些按钮，以便用户可以过滤掉该图库。“全部”按钮工作正常，但其他 3 个按钮则不行。我无法发现代码中的问题。

HTML

<div id="portfolio">
    <div id="portfolio-sort">
        <a href="#" id="all">ALL</a>
        <a href="#" data-cat="a">A</a>
        <a href="#" data-cat="b">B</a>
        <a href="#" data-cat="c">C</a>
    </div>
    <div id="portfolio-content">
        <div class="portfolio-item" data-cat="a">A</div>
        <div class="portfolio-item" data-cat="b">B</div>
        <div class="portfolio-item" data-cat="c">C</div>
        <div class="portfolio-item" data-cat="c">C</div>
        <div class="portfolio-item" data-cat="b">B</div>
        <div class="portfolio-item" data-cat="a">A</div>
        <div class="portfolio-item" data-cat="a">A</div>
        <div class="portfolio-item" data-cat="c">C</div>
        <div class="portfolio-item" data-cat="b">B</div>
    </div>

</div>

JS

var Portfolio = {
    sort: function (items) {
        Portfolio.hideAll($('#portfolio-content *'));
        Portfolio.showAll(items);
    },
    showAll: function (items) {
    items.fadeIn(700);
    },
    hideAll: function (items) {
        items.hide();
    },
    doSort: function () {
        $('a', '#portfolio-sort').on('click', function () {
            var $a = $(this);
            if (!$a.is('#all')) {
                var items = $('div[data-cat=' + $a.data('cat') + ']', '#portfolio-content');
                Portfolio.sort(items);
            } else {
                var items = $('#portfolio-content *');
                Portfolio.hideAll(items);
                Portfolio.showAll(items);
            }
        });
    }
};

Portfolio.doSort();

函数应该在按钮点击时进行过滤，我想要 3 个不同的值和一个返回所有图像的“全部”值。

请帮忙! :)

Answer 1

嘿，您的代码似乎工作正常，您使用的是哪个版本的 jQuery？为我工作的版本 3.1.0。也许发布一个 jsbin/codepen 的链接，我可以看一下。