JQuery - фильтр изображения с несколькими категориями

Question

Я пытаюсь добавить фильтр изображения в фотогалерею, и у меня возникли проблемы с его работой, когда у одной фотографии есть несколько категорий. Приведенный ниже код работает, когда телефон имеет только 1 категорию (например, UX). Но если я добавлю вторую категорию к той же фотографии, она не работает (например, UX, UI). Что мне нужно изменить в JS-коде, чтобы он работал? Благодаря!

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 

Answer 1

Вы проверки равенства, тогда вы должны проверять для если строка присутствует внутри значения data-filter.

Так внутри функции фильтра, вы должны использовать что-то вроде ...

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