Javascript 根据复选框值过滤内容

Question

我有这样的代码

<div id="filter">
</div>
<div id="items">
    <div class="item">
        <h2>Orange</h2>
        <img src="orange.png" alt="" />
    </div>
    <div class="item">
        <h2>Banana</h2>
        <img src="banana.png" alt="" />
    </div>
</div>

我想在其子 img src 值上过滤具有类“item”的 div。例如，如果我检查了输入女巫值 banana.png，则应仅显示具有相同 img src 值的 .item。休息必须隐藏。

如果您取消选中复选框，则应再次进行控制 - 应再次显示通过选中该复选框隐藏的元素。

我有创建正确复选框的相同代码，但如何休息呢？

$("#items > div").find("img").each(function() {
    var value = $(this).attr("src");
    $("#filter").append('<label><input type="checkbox" [value="' + value + '"]>' + value + '</label>');
    var toFilter = $("#items > div").find("img");
});

你也可以看到我的codepen http://codepen.io/anon/pen/gMpGaE?editors=0010

Answer 1

您可以使用复选框的 change 事件像这样过滤 div。

$("#items > div").find("img").each(function() {
  var value = $(this).attr("src");
  $("#filter").append('<label><input type="checkbox" value="' + value + '">' + value + '</label>');
  var toFilter = $("#items > div").find("img");
});
$('#filter').on('change', ':checkbox', function() {
  var checkedArray = $('#filter :checkbox:checked').map(function() {
    return this.value;
  }).get();
  if (checkedArray.length) {
    $("#items .item").hide();
    match = $("#items > div").find("img")
      .filter(function() {
        return checkedArray.indexOf($(this).attr('src')) != -1;
      }).closest('.item').show();
  } else {
    $("#items .item").show();
  }
})

#items > div {
  border: 1px dotted #355B78;
  margin-bottom: 10px;
}
label {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="filter">

</div>
<div id="items">
  <div class="item">
    <h2>Orange</h2>
    <img src="orange.png" alt="" />
  </div>
  <div class="item">
    <h2>Banana</h2>
    <img src="banana.png" alt="" />
  </div>
  <div class="item">
    <h2>Orange</h2>
    <img src="orange.png" alt="" />
  </div>
  <div class="item">
    <h2>Banana</h2>
    <img src="banana.png" alt="" />
  </div>
</div>