javascript - 通过复选框组进行多重过滤元素

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 Color
<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 Color
    <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>