Question

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

＆＃13;

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

＆＃13;

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元素。

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

它会生成一个CSS选择器过滤器：
1. 选择所有选中的复选框输入和下拉菜单
2. 将每个结果元素映射到符合CSS类的值（在前面添加点）
3. 将jQuery设置更改为普通数组和
4. 加入所有字符串
显示匹配结果：
1. 隐藏所有结果元素
2. 根据之前生成的过滤器和
3. 显示匹配的

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

....join(", ");

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

1 个答案: