為什么我的投資組合庫過濾不正確？

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，我可以看看。

Answer 2

如前所述，您的代碼可以正常工作。 請參閱下面的片段，使用版本2.2.4

 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(); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <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>