仅显示类名等于多个选中复选框值jQuery的项目

Question

我想创建一个过滤系统，其中只显示类名等于所选复选框值的文章。 用户可以选择多个 cb，结果应该只是那些文章。

I know how to show the article with the same selected checkbox value, but when multiple are selected the article that doesn't contain one of those cb value is still shown, so I tried to make it smarter. 到目前为止还没有运气。

编辑链接：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 具有类“类别-sc”
Babes Panorama 具有“类别-va”类
博蒙德两者都有

理想的情况是，当同时选择访问者加速器和网站内容时，只有 Beaumonde 会显示。

Answer 1

您可以尝试以下方法（我在代码中添加了 cmets）

$("#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/