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

<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＆＃39; category-sc＆＃39;
宝贝全景有班级＆＃39;类别-va＆＃39;
Beaumonde有两个

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

Answer 1

您可以尝试以下内容（我在代码中添加了注释）

＆＃13;

$("#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
});

＆＃13;

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/

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

2 个答案: