php - JQuery 多重过滤器

Question

我有一个来自自定义帖子类型的帖子列表。 对于每个帖子，我显示标题、状态和目录:

<div class="adherents">
    <article class="adh-1185 association work adh">
        <h2>Title</h2>
        <div class="metas">
            <span>Address</span>
            <br><span>Statut : Association</span>                               
            <br><span>Catégorie(s) : Work</span>                            
        </div>              
    </article>
    <article class="adh-1346 enterprise work adh">
        <h2>Title</h2>
        <div class="metas">
            <span>Address</span>
            <br><span>Statut : Enterprise</span>
            <br><span>Catégorie(s) : Work</span>
        </div>
    </article>
    <article class="adh-1187 enterprise education adh">
        <h2>Title</h2>
        <div class="metas">
            <span>Address</span>
            <br><span>Statut : Enterprise</span>
            <br><span>Catégorie(s) : Education</span>
        </div>
    </article>
    <article class="adh-1347 other health adh">
        <h2>Title</h2>
        <div class="metas">
            <span>Address</span>
            <br><span>Statut : Othr</span>
            <br><span>Catégorie(s) : Health</span>
        </div>
    </article>
</div>

这是我的 JQuery:

$('.todo input').click( function() {
    var statut = $(this).val();
    var statut = "."+statut;

    if( $(this).is(':checked')){
         $(statut).addClass('checked');
         $('.adh').not('.checked').hide();
         $(statut).show();

    }else{
        //Show all if nothing is checked</strike>
    }

});

这是我的过滤器:

<div class="filtres">
    <div class="statuts">
        <h3>Statut(s) :</h3>
            <label class="todo">
                <input class="todo__state" value="association" type="checkbox">
                <div class="todo__text">Association</div>
            </label>
            <label class="todo">
                <input class="todo__state" value="enterprise" type="checkbox">
                <div class="todo__text">Enterprise</div>
            </label>
            <label class="todo">
                <input class="todo__state" value="other" type="checkbox">
                <div class="todo__text">Other</div>
            </label>
    </div>
    <div class="categories">
        <h3>Categorie(s) :</h3>
            <label class="todo">
                <input class="todo__state" value="work" type="checkbox">
                <div class="todo__text">Work</div>
            </label>
            <label class="todo">
                <input class="todo__state" value="education" type="checkbox">
                <div class="todo__text">Education</div>
            </label>
            <label class="todo">
                <input class="todo__state" value="health" type="checkbox">
                <div class="todo__text">Health</div>
            </label>
    </div>
</div>

我的第一个过滤器工作得很好，但是当我想做多重过滤器状态和类别时。不起作用...单击显示我单击的类别，但不隐藏其他类别或隐藏之前检查的其他过滤器。有什么想法吗？

例如，当我查看状态 1、状态 2 和类别 1 时，我想在类别 2 上显示状态 1、状态 2 中的所有文章并隐藏其他文章。

用户可以按类别或状态或状态和类别通过多重过滤器进行过滤

[已解决]第二个问题:如果没有选中任何内容，如何显示所有文章？

Answer 1

您可以尝试以下代码，它应该可以满足您的要求:

$('.todo input').click(function() {
  $('.adh').hide();
  $('.todo input:checked').each(function() {
    var statut = $(this).val();
    statut = "." + statut;

    if ($(this).parent().parents('.categories').length) {
      $('.adh:visible:not('+statut+')').hide();
    } else {
      $(statut).show();
    }
  })

  if ($('.todo input:checked').length == 0) {
    $('.adh').show();
  }

});

它使用 .each() 循环遍历所有 '.todo input ，即 :checked。

演示

$('.todo input').click(function() {
  $('.adh').hide();
  $('.todo input:checked').each(function() {
    var statut = $(this).val();
    statut = "." + statut;

    if ($(this).parent().parents('.categories').length) {
      $('.adh:visible:not('+statut+')').hide();
    } else {
      $(statut).show();
    }
  })

  if ($('.todo input:checked').length == 0) {
    $('.adh').show();
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="adherents">
  <article class="adh-1185 statut1 categorie1 adh">
    <h2>Title</h2>
    <div class="metas">
      <span>Address</span>
      <br><span>Statut : statut1</span>
      <br><span>Catégorie(s) : categorie1</span>
    </div>
  </article>
  <article class="adh-1346 statut2 categorie3 adh">
    <h2>Title</h2>
    <div class="metas">
      <span>Address</span>
      <br><span>Statut : statut2</span>
      <br><span>Catégorie(s) : categorie3</span>
    </div>
  </article>
  <article class="adh-1187 statut2 categorie2 adh">
    <h2>Title</h2>
    <div class="metas">
      <span>Address</span>
      <br><span>Statut : statut2</span>
      <br><span>Catégorie(s) : categorie2</span>
    </div>
  </article>
  <article class="adh-1347 statut3 categorie1 adh">
    <h2>Title</h2>
    <div class="metas">
      <span>Address</span>
      <br><span>Statut : statut3</span>
      <br><span>Catégorie(s) : categorie1</span>
    </div>
  </article>
</div>

<div class="filtres">
  <div class="statuts">
    <h3>Statut(s) :</h3>
    <label class="todo">
                <input class="todo__state" value="statut1" type="checkbox">
                <div class="todo__text">Statut 1</div>
            </label>
    <label class="todo">
                <input class="todo__state" value="statut2" type="checkbox">
                <div class="todo__text">Statut 2</div>
            </label>
    <label class="todo">
                <input class="todo__state" value="statut3" type="checkbox">
                <div class="todo__text">Statut 3</div>
            </label>
  </div>
  <div class="categories">
    <h3>Categorie(s) :</h3>
    <label class="todo">
                <input class="todo__state" value="categorie1" type="checkbox">
                <div class="todo__text">Catégorie 1</div>
            </label>
    <label class="todo">
                <input class="todo__state" value="categorie2" type="checkbox">
                <div class="todo__text">Catégorie 2</div>
            </label>
    <label class="todo">
                <input class="todo__state" value="categorie3" type="checkbox">
                <div class="todo__text">Catégorie 3</div>
            </label>
  </div>
</div>