复选框组的多重过滤元素

Question

我正在尝试使用此代码创建一个简单的过滤器UI，但这里有两个问题。

1-如果按颜色进行过滤，则无法使用它们。如果用户首先按形状过滤，它们将起作用

2-按形状过滤，如果选择square，则将正确过滤框，但是如果您未选中square，则将删除所有框（不正确，现在应显示所有框）

我在做什么错了，我该如何解决？

var checks = $('.shape,.color,.size'),
  boxes = $('.box')
checks.on('change', function() {
  var selector = checks.map(function(i) {
    var name = this.className,
      checked = $(":checked", this)
    if (checked.length === 0) checked = $(this).children()
    return checked.map(function() {
      return "[data-" + name + "='" + $(this).data(name) + "']"
    }).get().join(",")
  }).get()
  //console.log(selector)
  var okBoxes = boxes
  selector.forEach(function(sel) {
    okBoxes = okBoxes.filter(sel)
  })
   // animate to left
   
    okBoxes.show(500);
  boxes.not(okBoxes).hide(500)
});

body{
  padding:40px;
}
.box{
float:left;
  margin:10px;
}
.red{
  background:red;
}
.green{
  background:green;}
.yellow{
  background:yellow;}
.diamond {

  height: 60px;
  text-align: center;
  transform:rotate(45deg) !important;
	width:60px;
}
.circle {

  height: 60px;
border-radius:50%;
	width:60px;
}
.square{
    height: 60px;
	width:60px;
}
.size input{
   display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Filter By Shape
<hr />
<div class="shape">
   <div class="list-group">
        <input type="checkbox" name="shape" data-shape="square">square
  <input type="checkbox" name="shape" data-shape="circle">circle
  <input type="checkbox" name="shape" data-shape="diamond">diamond
   </div>

</div>
<hr />
<br />
Filter By Collor
<hr />
<div class="color">
  <input type="checkbox" name="color" data-color="red">Red
  <input type="checkbox" name="color" data-color="yellow">yellow
  <input type="checkbox" name="color" data-color="green">green
</div>
<br />
<div class="row map">
  <div class="col-md-2 animated box red square" data-shape="square" data-color="red" data-size="50">50</div>
  <div class="col-md-2 animated box green circle" data-shape="circle" data-color="green" data-size="51">51</div>
  <div class="col-md-2 animated box yellow diamond" data-shape="diamond" data-color="yellow" data-size="50">50</div>
  <div class="col-md-2 animated box red diamond" data-shape="diamond" data-color="red" data-size="50">50</div>
  <div class="col-md-2 animated box green circle" data-shape="circle" data-color="green" data-size="51">51</div>
  <div class="col-md-2 animated box yellow square" data-shape="square" data-color="yellow" data-size="50">50</div>
  <div class="col-md-2 animated box red diamond" data-shape="diamond" data-color="red" data-size="50">50</div>
  <div class="col-md-2 animated box green circle" data-shape="circle" data-color="green" data-size="51">51</div>
  <div class="col-md-2 animated box yellow circle" data-shape="circle" data-color="yellow" data-size="50">50</div>
  <div class="col-md-2 animated box red diamond" data-shape="diamond" data-color="red" data-size="52">52</div>
  <div class="col-md-2 animated box green diamond" data-shape="diamond" data-color="green" data-size="51">51</div>
  <div class="col-md-2 animated box yellow square" data-shape="square" data-color="yellow" data-size="54">54</div>
  <div class="col-md-2 animated box red diamond" data-shape="diamond" data-color="red" data-size="50">50</div>
  <div class="col-md-2 animated box green diamond" data-shape="diamond" data-color="green" data-size="51">51</div>
  <div class="col-md-2 animated box yellow diamond" data-shape="diamond" data-color="yellow" data-size="54">54</div>
  <div class="col-md-2 animated box red square" data-shape="square" data-color="red" data-size="50">50</div>
  <div class="col-md-2 animated box green square" data-shape="square" data-color="green" data-size="51">51</div>
  <div class="col-md-2 animated box yellow diamond" data-shape="diamond" data-color="yellow" data-size="52">52</div>
  <div class="col-md-2 animated box red diamond" data-shape="diamond" data-color="red" data-size="53">53</div>
  <div class="col-md-2 animated box green square" data-shape="square" data-color="green" data-size="51">51</div>
  <div class="col-md-2 animated box yellow diamond" data-shape="diamond" data-color="yellow" data-size="54">54</div>
  <div class="col-md-2 animated box red circle" data-shape="circle" data-color="red" data-size="50">50</div>
  <div class="col-md-2 animated box green square" data-shape="square" data-color="green" data-size="51">51</div>
  <div class="col-md-2 animated box yellow diamond" data-shape="diamond" data-color="yellow" data-size="52">52</div>
</div>

Answer 1

如果您在过滤器组上添加其他类，并且如果更改HTML结构，那么脚本将无法正常工作。

这是您的工作示例，但我建议您不要长期使用它。

var checks = $('.shape,.color,.size'),
  boxes = $('.box')
checks.on('change', function() {
  
  
  var selector = checks.map(function(i) {
    var name = this.className,
      checked = $(":checked", this)
    if (checked.length === 0) checked = $(this).children()
    return checked.map(function() {
      return "[data-" + name + "='" + $(this).data(name) + "']"
    }).get().join(",")
  }).get()
  //console.log(selector)
  var okBoxes = boxes
  selector.forEach(function(sel) {
    okBoxes = okBoxes.filter(sel)
  })
   // animate to left
   
    okBoxes.show(500);
  boxes.not(okBoxes).hide(500)
});

body{
  padding:40px;
}
.box{
float:left;
  margin:10px;
}
.red{
  background:red;
}
.green{
  background:green;}
.yellow{
  background:yellow;}
.diamond {

  height: 60px;
  text-align: center;
  transform:rotate(45deg) !important;
	width:60px;
}
.circle {

  height: 60px;
border-radius:50%;
	width:60px;
}
.square{
    height: 60px;
	width:60px;
}
.size input{
   display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="filters">
    Filter By Shape
    <hr />
    <div class="shape" data-group="shape">
        <input type="checkbox" name="shape" data-shape="square">square
        <input type="checkbox" name="shape" data-shape="circle">circle
        <input type="checkbox" name="shape" data-shape="diamond">diamond
    </div>

    <hr />
    <br />
    Filter By Collor
    <hr />
    <div class="color" data-group="color">
        <input type="checkbox" name="color" data-color="red">Red
        <input type="checkbox" name="color" data-color="yellow">yellow
        <input type="checkbox" name="color" data-color="green">green
    </div>
</div>
<br />
<div class="row map">
  <div class="col-md-2 animated box red square" data-shape="square" data-color="red" data-size="50">50</div>
  <div class="col-md-2 animated box green circle" data-shape="circle" data-color="green" data-size="51">51</div>
  <div class="col-md-2 animated box yellow diamond" data-shape="diamond" data-color="yellow" data-size="50">50</div>
  <div class="col-md-2 animated box red diamond" data-shape="diamond" data-color="red" data-size="50">50</div>
  <div class="col-md-2 animated box green circle" data-shape="circle" data-color="green" data-size="51">51</div>
  <div class="col-md-2 animated box yellow square" data-shape="square" data-color="yellow" data-size="50">50</div>
  <div class="col-md-2 animated box red diamond" data-shape="diamond" data-color="red" data-size="50">50</div>
  <div class="col-md-2 animated box green circle" data-shape="circle" data-color="green" data-size="51">51</div>
  <div class="col-md-2 animated box yellow circle" data-shape="circle" data-color="yellow" data-size="50">50</div>
  <div class="col-md-2 animated box red diamond" data-shape="diamond" data-color="red" data-size="52">52</div>
  <div class="col-md-2 animated box green diamond" data-shape="diamond" data-color="green" data-size="51">51</div>
  <div class="col-md-2 animated box yellow square" data-shape="square" data-color="yellow" data-size="54">54</div>
  <div class="col-md-2 animated box red diamond" data-shape="diamond" data-color="red" data-size="50">50</div>
  <div class="col-md-2 animated box green diamond" data-shape="diamond" data-color="green" data-size="51">51</div>
  <div class="col-md-2 animated box yellow diamond" data-shape="diamond" data-color="yellow" data-size="54">54</div>
  <div class="col-md-2 animated box red square" data-shape="square" data-color="red" data-size="50">50</div>
  <div class="col-md-2 animated box green square" data-shape="square" data-color="green" data-size="51">51</div>
  <div class="col-md-2 animated box yellow diamond" data-shape="diamond" data-color="yellow" data-size="52">52</div>
  <div class="col-md-2 animated box red diamond" data-shape="diamond" data-color="red" data-size="53">53</div>
  <div class="col-md-2 animated box green square" data-shape="square" data-color="green" data-size="51">51</div>
  <div class="col-md-2 animated box yellow diamond" data-shape="diamond" data-color="yellow" data-size="54">54</div>
  <div class="col-md-2 animated box red circle" data-shape="circle" data-color="red" data-size="50">50</div>
  <div class="col-md-2 animated box green square" data-shape="square" data-color="green" data-size="51">51</div>
  <div class="col-md-2 animated box yellow diamond" data-shape="diamond" data-color="yellow" data-size="52">52</div>
</div>