僅顯示classname等於多個複選框值的項目jQuery

Question

我想創建一個過濾器系統，其中只有類名等於所選複選框值的項目纔會顯示。 用戶可以選擇多個cb，結果應該只是那些文章。

我知道如何顯示具有相同選定複選框值的文章，但是當選擇多個文章時，仍然顯示不包含這些cb值之一的文章，因此我試圖使其更明智。 到目前爲止沒有運氣。

編輯鏈接：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」
寶貝全景具有類的類-VA「
Beaumonde既有

因此，理想的情況是，當同時選擇遊客加速器和網頁內容，只Beaumonde將顯示。

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/