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>

所以我想要实现的是用户点击＆＃34;法拉利＆＃34;过滤器，它只会显示具有id＆＃34; 4＆＃34;在过滤器属性中。但是如果用户点击了＃Alfa-Romea，奥迪，梅赛德斯 - 奔驰＆＃34;过滤器，那么它只会显示带有＆＃34; 1,3,4＆＃34;过滤器属性中的ID。

只有一个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>

简单的jQuery过滤

1 个答案: