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>

我想用class＆＃34; item＆＃34;过滤div。在它的孩子img src值。例如，如果我检查输入女巫值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

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

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