Jquery - image filter with multiple categories

Question

I'm trying to add an image filter to a photo gallery and I'm having trouble getting it to work when one photo has multiple categories. The code below works when a phone only has 1 category (e.g. UX). But if I add a second category to that same photo it doesn't work (e.g. UX, UI). What do I need to change in the JS code to make it work? Thanks!

HTML

 <div id="filterWrapper">
                <a data-rel="all"  href="javascript:;" class="filter active">View all</a>
                <a data-rel="UX" href="javascript:;" class="filter">UX Design</a>
                <a data-rel="UI" href="javascript:;" class="filter">UI Design</a>
                <a data-rel="Prototype/Development" href="javascript:;" class="filter">Prototype/Development</a>
</div>
          <ul>
              <li>
                <a class="portfolio-item" data-portfolio-group="gallery" data-filter="UX" ></a>
              </li>
              <li>
                <a class="portfolio-item" data-portfolio-group="gallery" data-filter="UX UI Prototype/Development"></a>
              </li>
          </ul>

JS

// filter selector
$(".filter").on("click", function () {
    var $this = $(this);
    // if we click the active tab, do nothing
    if ( !$this.hasClass("active") ) {
        $(".filter").removeClass("active");
        $this.addClass("active"); // set the active tab
        // get the data-rel value from selected tab and set as filter
        var $filter = $this.data("rel");
        // if we select view all, return to initial settings and show all

        $filter == 'all' ?
            $(".portfolio-item")
                            .attr("data-portfolio-group", "gallery")
                            .not(":visible")
                            .fadeIn()
        : // otherwise
            $(".portfolio-item")
            .fadeOut(0)

            .filter(function () {
                // set data-filter value as the data-rel value of selected tab
                return $(this).data("filter") == $filter;
            })
            // set data-portfolio-group and show filtered elements
            .attr("data-portfolio-group", $filter)
            .fadeIn(1000);
    } // if
}); // on

Mohd Abdul Mujib · Accepted Answer · 2016-11-01 15:00:46Z

1

You are checking for equality whereas you should be checking for if the string is present inside the data-filter value.

So inside the filter function, you should use something like...

return ($(this).data("filter").indexOf($filter) > -1);

answered Nov 1, 2016 at 15:00

Mohd Abdul Mujib

14.2k8 gold badges73 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Jquery - image filter with multiple categories

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related