javascript - 仅显示类名等于多个选中的复选框值 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 具有“category-sc”类
Babes Panorama 有类“category-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
});