Question

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

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

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

＆＃13;

$("#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"]();
  });
});

＆＃13;

.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;
}

＆＃13;

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

过滤器工作不排除结果

0 个答案: