过滤器工作不排除结果

时间:2017-11-22 07:44:26

标签: javascript jquery html css filter

我有简单的js过滤器,你可以在这里看到:http://jsfiddle.net/qyy810xx/

所以我一直坚持分离过滤器的结果。我的意思是我需要这个: 1)如果选中A类,我们可以看到div class =" categorya"只要; 2)如果选中B类,我们可以看到div class =" categoryb"只要; 3)如果检查了类别A和类别B,我们可以看到div class =" categorya categoryb"仅

我对jquery不是很擅长,所以如果你提供任何解决方案,这将没有问题。 谢谢!



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

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

.categorya,
.categoryb,
.categoryrko,
.categoryab,
.categorybb,
.categoryrkob {
  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,
.categorybb {
  background: blue;
}

.categorya.categoryb {
  background: purple;
}

#filters-b {
  display: inline-box;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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="bankomat-f categorya categoryb">A, B</div>
<div class="bankomat-f categorya">A</div>
<div class="bankomat-f categorya">A</div>
<div class="bankomat-f categorya">A</div>
<div class="bankomat-f categoryrko">RKO</div>
<div class="bankomat-f categoryb">B</div>
<div class="bankomat-f categoryb">B</div>
<div class="bankomat-f categoryb">B</div>
&#13;
&#13;
&#13;

0 个答案:

没有答案
相关问题