使用 Javascript 和 Jquery 的简单产品过滤器 - Simple Product Filter Using Javascript and Jquery

我正在使用JQUERY创建一个简单的产品过滤器。结果针对复选框值显示，但不显示"选择框值"。我想同时使用这两个功能。结果根据应用于每个产品的DIV类"xxx"值显示。您可以在以下位置找到一个实时示例： [演示]： http://jsfiddle.net/shamsmaxcom/rc5ctjez/？"点击这里观看现场演示" 源代码粘贴在下面。请帮忙。谢谢

 <div id="solution_finder">
  <h1 style="font-size:27px; margin-top:45px; margin-left:40px; font-weight:normal;"> Product Filter </h1>
  <ul id="filters" style="list-style:none; margin-top:25px; line-height:30px; ">
    <li>
      <input type="checkbox" value="all" checked="checked" id="all" style="display:none;">
    </li>
     <li>
      <input type="checkbox" value="3xzoom" id="3xzoom">
      <label for="filter-category">3x video zoom</label>
    </li>
    <li>
      <input type="checkbox" value="touch" id="touch">
      <label for="filter-category">Touch ID</label>
    </li>
    <li>
      <input type="checkbox" value="burstmode" id="burstmode">
      <label for="filter-category">Burst mode</label>
    </li>
    <li>
      <input type="checkbox" value="antireflective" id="antireflective">
      <label for="filter-category">Antireflective coating</label>
    </li>
    
  </ul>
  <div style="margin-left:43px;">
  <select id="genre" onChange="return selectOption();">
    <option value="All">All</option>
    <option value="with-retina">With Retina Display</option>
    <option value="without-retina">Without Retina Display</option>
  </select>
  </div>
  <div style="width:840px; height:148px; clear:both; margin-top:40px; margin-left:43px;">
  
    <div id="so_air2" class="category 3xzoom touch burstmode antireflective with-retina all" ><a href="#" ><h1>iPad Air 2</h1> </a></div>
    <div id="so_air" class="category 3xzoom with-retina all" ><a href="#" ><h1>iPad Air</h1></a></div>
    <div id="so_mini3" class="category 3xzoom touch with-retina all" ><a href="#" ><h1>iPad mini 3</h1></a></div>
    <div id="so_mini2" class="category 3xzoom with-retina all" ><a href="#" > <h1>iPad mini 2</h1> </a></div>
    <div id="so_mjni" class="category all" ><a href="#" > <h1>iPad mini</h1> </a></div>
          
  </div>
  <script type="text/javascript">
$('input').change (function() {
        var selector = $('input:checkbox').map(function(){ 
            return this.checked ? '.' + this.id : ''; 
        }).get().join('');
        var all = $('div[class^="category"]');
        if(selector.length)
          all.hide().filter(selector).show()
        else all.hide();
		    });
	</script> 
</div>

我已经稍微更改了您的HTML和javascript代码以使其工作。

这是正在运行的 JSFiddle。

使用复选框和下拉列表的值的代码是

$(':input').change(function(evt){
    var filter = $(':input:checked,select').map(function(index, el) {
        return "." + el.value;
    }).toArray().join("");
    $(".category").hide().filter(filter).show();
});

请注意，我使用:input选择器而不是input来告诉 jQuery 在定义更改事件处理程序时也包含select元素。

更改事件处理程序之后的作用是

它生成一个 CSS 选择器过滤器：
1. 选择所有选中的复选框输入和下拉列表
2. 将每个生成的元素映射到其符合 CSS 类的值(在前面添加点(
3. 将 jQuery 集更改为普通数组和
4. 将所有字符串连接在一起
按以下方式显示匹配结果：
1. 隐藏所有结果元素
2. 根据先前生成的过滤器过滤它们，然后
3. 显示匹配的

此筛选器使用 AND 谓词逻辑。如果要使用 OR，则唯一的区别是加入筛选器类时：

....join(", ");