複数のカテゴリを持つJquery画像フィルタ

Question

画像フィルタをフォトギャラリーに追加しようとしていますが、1つの写真に複数のカテゴリがある場合に問題があります。以下のコードは、電話機に1つのカテゴリ（UXなど）しかない場合に機能します。しかし、同じ写真に2番目のカテゴリを追加しても機能しません（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);