シンプルなjQueryフィルタリング

Question

私はニュースにフィルタをかけたいカテゴリはほとんどありません。

現在

マイHTML：

<div class="filters"> 
    <a href="#" data-filters="1,2,3,4">All</a> 
    <a href="#" data-filters="3,4">Audi, Mercedes Benz</a> 
    <a href="#" data-filters="4">Ferrari</a> 
    <a href="#" data-filters="1,3,4">Alfa-Romeo Audi, Mercedes-Benz</a> 
</div> 

<div id="news"> 
    <article data-filters="1,2"> 
     <h1></h1> 
    </article> 
    <article data-filters="2"> 
     <h1></h1> 
    </article> 
    <article data-filters="1,2,3,4"> 
     <h1></h1> 
    </article> 
    <article data-filters="3"> 
     <h1></h1> 
    </article> 
    <article data-filters="4"> 
     <h1></h1> 
    </article> 
</div> 

それでは、私が達成したいことは、ユーザーが「フェラーリ」フィルタをクリックした場合、それはその後、属性のみのフィルタでIDを持っている記事「4」を示すだろうです。しかし、ユーザーが「Alfa-Romea、Audi、Mercedes-Benz」フィルターをクリックすると、フィルター属性に「1,3,4」IDを持つ記事のみが表示されます。私はこのように実現することができる唯一の1つのIDと

シンプルフィルタ：

$('.filters a').click(function() { 
    var toFilter = $(this).data('filters'); 

    $('.news article').each(function(i,elem) { 
     var filters = $(this).data('filters'); 

     if (filters == toFilter) { 
      $(this).addClass('hidden'); 
     } 
    )}; 
}); 

しかし、私はどのように私は私のjQueryを変更する必要がありますので、複数のIDを持っていつかフィルタで私の場合

？

Answer 1

あなたは

var $articles = $('#news article'); 
 
$('.filters a').click(function(e) { 
 
    e.preventDefault(); 
 
    var toFilter = $(this).attr('data-filters').split(','); 
 

 
    $articles.hide().filter(function() { 
 
    var filter = $(this).attr('data-filters').split(','); 
 
    return toFilter.some(function(value) { 
 
     return filter.indexOf(value) > -1; 
 
    }); 
 
    }).show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="filters"> 
 
    <a href="#" data-filters="1,2,3,4">All</a> 
 
    <a href="#" data-filters="3,4">Audi, Mercedes Benz</a> 
 
    <a href="#" data-filters="4">Ferrari</a> 
 
    <a href="#" data-filters="1,3,4">Alfa-Romeo Audi, Mercedes-Benz</a> 
 
</div> 
 

 
<div id="news"> 
 
    <article data-filters="1,2"> 
 
    <h1>1,2</h1> 
 
    </article> 
 
    <article data-filters="2"> 
 
    <h1>2</h1> 
 
    </article> 
 
    <article data-filters="1,2,3,4"> 
 
    <h1>1,2,3,4</h1> 
 
    </article> 
 
    <article data-filters="3"> 
 
    <h1>3</h1> 
 
    </article> 
 
    <article data-filters="4"> 
 
    <h1>4</h1> 
 
    </article> 
 
</div>