Question

我遇到了这个问题。有一个简单的过滤器，它的工作方式与我不需要的方式不同：http://jsfiddle.net/qyy810xx/ CSS在这里：

.categorya, .categoryb, .categoryrko {

    width: 30px;
    height: 20px;
    line-height:20px;
    text-align:center;
    background: red;
    margin: 10px;
    float: left;
    font-size:11px;
    color:white;
    font-family:sans-serif;
}
.categoryb {
    background: blue;
}

.categorya.categoryb{
    background:purple;
}
p.info{
    padding:30px 20px 0 20px;
    color:#666;
    font-family:sans-serif;
    font-size:13px;
}

HTML：

<ul id="filters">
    <li>
        <input type="checkbox" value="categorya" id="filter-categorya" />
        <label for="filter-categorya">Category A</label>
    </li>
    <li>
        <input type="checkbox" value="categoryb" id="filter-categoryb" />
        <label for="filter-categoryb">Category B</label>
    </li>
    <li>
        <input type="checkbox" value="categoryrko" id="filter-categoryrko" />
        <label for="filter-categoryrko">RKO</label>
    </li>
</ul>

<div class="categorya categoryb">A, B</div>
<div class="categorya">A</div>
<div class="categorya">A</div>
<div class="categorya">A</div>
<div class="categoryrko">RKO</div>
<div class="categoryb categoryrko">BRko</div>
<div class="categoryb">B</div>
<div class="categoryb">B</div>

脚本：

 $("#filters :checkbox").click(function() {

   var re = new RegExp($("#filters :checkbox:checked").map(function() {
                          return this.value;
                       }).get().join("|") );
   $("div").each(function() {
      var $this = $(this);
      $this[re.source!="" && re.test($this.attr("class")) ? "show" : "hide"]();
   });
});

如果选择categoryB，我们只能看到categoryB类的div，但我需要查看所有div，包括categoryB类。例如如果你选择categoryA它必须显示[A，B]块，所有[A]块和[RKOa]块，但是如果你选择categoryA AND categoryRKO它必须只显示[RKOa]阻止。即只有满足所有参数的块。

我很乐意提供任何帮助

Answer 1

您无需使用相同的逻辑制作正则表达式，只需制定选择器

$("#filters :checkbox").click(function() {

   var selector = $("#filters :checkbox:checked").map(function() {
                          return "." + this.value;
                  }).get().join(",");
   $("div").hide().filter(selector).show(); //now show only those which are matching the selector chosen above
});

Answer 2

我知道你要做什么。但说实话，你的代码对其他人来说真的很难阅读。因此，我决定提出一个更好的解决方案，让每个人都能轻松了解我在阅读代码时要做的事情。

这个想法是：每次检查一个复选框。

您可以在所有复选框中进行映射，并将选中复选框的值推送到array。
然后隐藏所有div
最后循环浏览array并显示已选中的。

这是你的修改代码。 :)希望它可以给你一个想法。

    $(".filter-checkbox").click(function() {
			var checkboxes = $('.filter-checkbox');
      var checkedClasses = [];
      //Map and get all checked category
      var activeCheckboxes = checkboxes.each(function(index,checkbox){
      	if(checkbox.checked)
        	checkedClasses.push(checkbox.value);
      });
      //Hide all category
      $('.category').hide();
      //Show only checked
      $.each(checkedClasses,function(index,className){
      	$('.' + className).show();
      })
    });

.categorya, .categoryb, .categoryrko {
    
    width: 30px;
    height: 20px;
    line-height:20px;
    text-align:center;
    background: red;
    margin: 10px;
    float: left;
    font-size:11px;
    color:white;
    font-family:sans-serif;
}

.categoryb {
    background: blue;
}

.categorya.categoryb{
    background:purple;
}
p.info{
    padding:30px 20px 0 20px;
    color:#666;
    font-family:sans-serif;
    font-size:13px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="filters">
    <li>
        <input class="filter-checkbox" type="checkbox" value="categorya" id="filter-categorya" />
        <label for="filter-categorya">Category A</label>
    </li>
    <li>
        <input class="filter-checkbox" type="checkbox" value="categoryb" id="filter-categoryb" />
        <label for="filter-categoryb">Category B</label>
    </li>
    <li>
        <input class="filter-checkbox" type="checkbox" value="categoryrko" id="filter-categoryrko" />
        <label for="filter-categoryrko">RKO</label>
    </li>
</ul>

<div class="category categorya categoryb">A, B</div>
<div class="category categorya">A</div>
<div class="category categorya">A</div>
<div class="category categorya">A</div>
<div class="category categoryrko">RKO</div>
<div class="category categoryb">B</div>
<div class="category categoryb">B</div>
<div class="category categoryb">B</div>

<br />
<p class="info">
    - If you select Category A: four boxes will apear [A,B] [A] [A] [A]
    <br/><br/>
    - Then if you select Category B and deselect it again: the purple box [A,B] will disapear because the script commands to hide 'B'.
    <br/><br/>
    - But I don't want the script to hide box 'B' when it also contains 'A'..
</p>

几个条件过滤javascript / jquery

2 个答案: