javascript - 使用 Javascript 和 Jquery 进行简单的产品过滤

Question

我正在使用 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>

Answer 1

我对您的 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 元素。

更改事件处理程序之后执行的操作是

1. 它生成一个 CSS 选择器过滤器:
   1. 选择所有选中的复选框输入和下拉列表
   2. 将每个结果元素映射到其 CSS 类兼容值(在前面添加点)
   3. 将 jQuery 设置更改为普通数组并
   4. 将所有字符串连接在一起
2. 显示匹配结果:
   1. 隐藏所有结果元素
   2. 根据之前生成的过滤器过滤它们
   3. 显示匹配的内容

此过滤器使用 AND 谓词逻辑。如果您想使用 OR，那么唯一的区别是在加入过滤器类时:

....join(", ");