时间戳

首页 > 解决方案 > 使用 jQuery 的多重过滤器

javascript - 使用 jQuery 的多重过滤器

问题描述

选择 1

`<select class="form-control" id="technology">
 <option name="sort" value="2g" id="2g">2G</option>
 <option name="sort" value="3g" id="3g">3G</option></select>`

选择 2

 <select class="form-control" id="use">
     <option name="sort2" value="vehicle" id="vehicle"> Vehicle </option>
     <option name="sort2" value="asset" id="asset"> Asset </option>
     <option name="sort2" value="personal" id="personal"> Personal</option>
 </select>

复选框过滤器

 <input type="checkbox" value="standard">
 <input type="checkbox" value="one way">
 <input type="checkbox" value="two way">

我的 HTML

<div class="flower 2g vehicle standard">
  2g vehicle
</div>
<div class="flower 3g vehicle one way">
  3g vehicle one way
</div>
<div class="flower 3g vehicle two way">
  3g vehicle two way
</div>

这些是需要根据类过滤它们的三个过滤器。我为复选框做了，但是如何结合三个（两个选择和复选框）来做？

我的复选框过滤器代码

jQuery($ => {
  let $seasons = $('.flower');
  let $checkboxes = $('input[type="checkbox"]').on('change', function () {
    $seasons.show();
    let selector = $checkboxes.filter(':checked').map((i, el) => '.' + el.value).get().join(''); console.log(selector)
    if (selector.length != 0)
      $('.flower:visible').filter(`:not("${selector}")`).hide();
  });

标签： javascriptjquery

解决方案

您只能为两者设置一个事件处理程序，select因此checkbox当任何一个发生更改时，您可以获得那里的值，然后显示/隐藏您的 div。

演示代码：

$('select , input[type="checkbox"]').on('change', function() {
  $(".flower").hide(); //hide divs
  //get both select value
  var value1 = $("#use").val()
  var value2 = $("#technology").val()
  var to_find = "." + value1 + "." + value2
  $(`.flower${to_find}`).show() //show that div
  let selector = $('input[type="checkbox"]').filter(':checked').map((i, el) => '.' + el.value).get();
  if (selector.length != 0)
    //loop through selected checkbox
    for (var i = 0; i < selector.length; i++) {
      $('.flower:visible').filter(`:not("${selector[i]}")`).hide();
    }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="technology">
  <option name="sort" value="2g" id="2g">2G</option>
  <option name="sort" value="3g" id="3g">3G</option>
</select>

<select class="form-control" id="use">
  <option name="sort2" value="vehicle" id="vehicle"> Vehicle </option>
  <option name="sort2" value="asset" id="asset"> Asset </option>
  <option name="sort2" value="personal" id="personal"> Personal</option>
</select>


<input type="checkbox" value="standard">standard
<input type="checkbox" value="oneway">oneway
<input type="checkbox" value="twoway">twoway

<div class="flower 2g vehicle standard">
  2g vehicle standard
</div>
<div class="flower 3g asset oneway">
  3g asset one way
</div>
<div class="flower 3g vehicle twoway">
  3g vehicle two way
</div>
<div class="flower 2g vehicle oneway">
  2g vehicle oneway
</div>
<div class="flower 3g asset standard">
  3g asset standard
</div>
<div class="flower 3g vehicle twoway">
  3g vehicle two way
</div>

推荐阅读