JQuery Multi-filter

Question

我有自定义帖子类型的帖子列表。 Foreach帖子，我显示标题，法定和猫：

<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>

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

例如，当我检查Statut 1，Statut 2和Categorie 1时，我想显示来自Statut 1，Statut 2 on Categorie 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。

<强>演示

＆＃13;

＆＃13;

$('.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();
  }

});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试以下代码：

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
    $('.todo input').click(function() {
        var show_statuts = [];
        var show_categories = [];
        $('.adh').hide();
        $('.statuts input:checked').each(function() {
            statut = $(this).val();
            show_statuts.push(statut) ;

        });
        $('.categories input:checked').each(function() {
            categorie = $(this).val();
            show_categories.push(categorie);
        });

        if($('.todo input:checked').length == 0){
            $('.adh').show();
        }else if($('.categories input:checked').length == 0){
            $.each(show_statuts, function( index, value ) {
                $('.'+value).show();
            });
        }else{
            $.each(show_categories, function( index, categorie_value ) {
                if(show_statuts.length == 0){
                    $('.'+categorie_value).show();
                }else{
                    $.each(show_statuts, function( index, statuts_value )   {
                        if($('.'+statuts_value).hasClass(categorie_value)){
                            $('.'+statuts_value+'.'+categorie_value).show();
                        }
                    });
                }

            });
        }

    });
})

</script>
<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>
<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>