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>

为什么我的投资组合库过滤不正确？

2 个答案: