Показать только элемент с именем класса, равным нескольким выбранным значениям флажка jQuery

Question

Я хочу создать систему фильтров, в которой будут отображаться только статьи с именем класса, равным выбранному флажковому значению. Пользователь может выбрать несколько cb, и результаты должны быть только этими статьями.

Я знаю, как показать статью с тем же выбранным значением флажка, но когда выбрано несколько, статья, которая не содержит одного из этих значений cb, все еще отображается, поэтому я попытался сделать ее более умной. Пока не повезло.

EDIT Ссылка: http://strosslenet.nl/demo/ - изменил ссылку, чтобы другие могли выглядеть.

код JQuery:

$("#filters :checkbox").click(function() { // if click on a checkbox 
    $(".widget-lijst article").hide(); // hide all the items first 

    var valCB = $(this).val() // value of the checkbox; 

    $("#filters :checkbox:checked").each(function() { 
     var valObj = $("." + $(this).val()); // value of the object 
     var $allClasses = valObj.attr('class').split(' '); // splits every class in a object 

     console.log(valObj); 

     for(var i=0; i < $allClasses.length; i++) { 

      if($allClasses == valCB) { 

       console.log('true'); 

      } else { 

       console.log('false'); 
      } 
     } 
    }); 
}); 

HTML код:

<ul id="filters"> 
    <li>Type 
    <ul> 
     <li><input type="checkbox" value="category-sc" id="sc" /><label for="category-sc">Site content</label></li> 
     <li><input type="checkbox" value="category-va" id="va" /><label for="category-va">Visitor accelerator</label></li> 
     <li><input type="checkbox" value="category-ad" id="ad" /><label for="category-ad">Ad only</label></li> 
    </ul> 
    </li> 
</ul> 

Элементы создаются Wordpress посты.
Ajaxshowtime имеет Classe «категория-SC»
Babes Panorama имеет класс «категория-ва»
Бомонд имеет как

Так идеальная ситуация была бы, что, когда и посетителей акселератор и содержание сайта выбраны, только Бомонд покажет ,

Answer 1

Вы можете попробовать что-то вроде следующего (я добавил комментарии в коде)

$("#filters :checkbox").change(function() { // if checkbox state changes (in case a label is clicked) 
 
    $(".widget-lijst article").hide(); // hide all the items first 
 

 
    var selector = ''; // create a selector 
 
    
 
    $("#filters :checkbox:checked").each(function() { 
 
     selector += '.' + $(this).val(); // append selected values to selector (no spaces so classes are combined if multiple) 
 
    }); 
 
    
 
    $(selector).show(); // show matching articles 
 
});

Answer 2

$(document).ready(function(){ 
    $('input:checkbox').click(function(){ 
     var value = $(this).val(); 
     $('.'+value).toggle(); 
    }); 
}); 

.category { 
    width: 100px; 
    height: 100px; 
    background: #ccc; 
    border: 1px solid; 
    margin: 10px; 
    padding: 10px; 
    float: left; 
    display: none; 
} 

<div> 
    <input type="checkbox" name="article" value="category01"> Category 01 
    <input type="checkbox" name="article" value="category02"> Category 02 
    <input type="checkbox" name="article" value="category03"> Category 03 
    <input type="checkbox" name="article" value="category04"> Category 04 
</div> 
<div> 
    <div class="category category01"> 
     Article category01 
    </div> 
    <div class="category category01"> 
     Article category01 
    </div> 
    <div class="category category01"> 
     Article category01 
    </div> 
    <div class="category category01"> 
     Article category01 
    </div> 
    <div class="category category02"> 
     Article category02 
    </div> 
    <div class="category category02"> 
     Article category02 
    </div> 
    <div class="category category02"> 
     Article category02 
    </div> 
    <div class="category category03"> 
     Article category03 
    </div> 
    <div class="category category03"> 
     Article category03 
    </div> 
    <div class="category category04"> 
     Article category04 
    </div> 
</div> 

Это может решить вашу проблему. Пожалуйста, проверьте это.

https://jsfiddle.net/ganesh16889/r359ysdt/