CODEWITHSUNDEEP
javascriptjquery
ficanovak
ficanovak

Reputation: 39

Why is my portfolio gallery not filtering right?

I've created a portfolio gallery and I'd like to add some buttons so user could filter out the gallery. Button 'All' is working fine, but other 3 buttons are not. I can't spot the problem in my code.

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

Function is supposed to filter on button click, I'd like to have 3 different values and one 'all' value that would return all images.

Please help! :)

Upvotes: 0

Views: 371

Answers (2)

PeterKA
PeterKA

Reputation: 24638

As has already been stated, your code works just fine. See snippet below working with version 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>

Upvotes: 0

Francisco Ruiz
Francisco Ruiz

Reputation: 101

Hey your code seems to be working correctly, which version of jQuery are you using? Worked for me with version 3.1.0. Maybe post a link to a jsbin/codepen and I can take a look.

Upvotes: 1

Related Questions