简单的 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”ids的文章。

只有一个 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');
        }
    )};
});

但就我而言，有时在过滤器中我有多个 ID，那么我应该如何修改我的 jQuery？

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>