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

---

对于选择和复选框，您只能有一个事件处理程序，所以当任何一个得到更改时，您都可以得到该值，然后显示/隐藏您的div

演示代码：

$'select，input[type=checkbox]'。在'change'，函数{ $.flower.hide；//隐藏divs //获取两个选择值 var value1=$use.val var value2=$technology.val var to_find=.+value1+.+value2 $`.flower${to_find}`.show//显示该div 让选择器=$'input[type=checkbox]'.filter'：已选中.mapi，el=>'.+el.value.get； 如果selector.length！=0 //循环通过选中的复选框 对于变量i=0；i 让$seasons=$'花'； $seasures.hide； const showDiv=cb=>{ const val=$cb.val； 常量checked=$cb.is'：checked'； const technology=$technology选项：selected.val； const use=$use选项：selected.val； $seasons.each，seasons=>{ const$季节=$季节； const clazz=$seasure.attrclass； 如果clazz.indexOfval！=-1{ 如果选中&&！[技术，请使用].someopt=>clazz.indexOfopt==-1{ $seasure.show； }否则{ $seasure.hide； } } }; } 常量无效==>{ $'input[type=checkbox]'{ showDivcb； }; }; $'input[type=checkbox]'。在'change'，函数{ 展示这一点； }; $'technology'。关于'change'，函数{ 使无效 }; $'use'。在'change'上，函数{ 使无效 }; 2G 3G 交通工具 资产 个人的 标准 单行线 双向 2g车辆 3g车辆单向 3g车辆双向

---

因为您希望对同一个项目列表应用多个筛选器。最好使用数据属性分隔这些值

HTML 2g车辆 3g车辆单向 3g车辆双向 过滤器可以保持不变

选择1 2G 3G 选择2 交通工具 资产 个人的 复选框过滤器 标准 单行线 双向 添加多重过滤器函数以按多个值进行过滤，并将其附加到所有过滤器

函数过滤器{ 返回i，el=>Array.isArrayval ？val.length==0 | | val.indexOf$el.datakey>-1 ：val==||$el.datakey==val } 函数多重滤波器{ 让tech=$'technology'.val let use=$'use'.val let type=$'input[type=checkbox]'.filter'：checked'.mapi，el=>el.value.toArray 让$seasons=$“.flower” $seasures.hide $seasons .filterfilterBy'tech'，tech .filterfilterBy'use'，use .filterfilterBy'type'，type 显示 } jQuery$=>{ $'technology，use，input[type=checkbox]'。在'change'，多重过滤器 }

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

<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();
  });