如何通过双选项筛选元素？jQuery多条件筛选失效排查

我一眼就发现问题所在啦——你写的选择器 a[data-gender=men][data-color=blue][data-color=red] 是在找**同时拥有data-color=blue和data-color=red**的元素，但一个元素的data-color属性只能有一个值，这就导致没有元素能匹配到，组合筛选自然失效了！

正确的筛选实现方式 #

要实现「性别为男性，且颜色是蓝色或红色」的逻辑，你需要把颜色条件改成逻辑或的关系，这里有两种直观的写法：

方式1：扩展属性选择器（CSS语法原生支持）

用逗号分隔两个独立的选择器，每个选择器都包含性别条件+单一颜色条件：

$("a[data-gender=men][data-color=blue], a[data-gender=men][data-color=red]")

方式2：使用jQuery的.filter()方法（更灵活）

先筛选出所有男性元素，再从中过滤出颜色符合条件的：

$("a[data-gender=men]").filter("[data-color=blue], [data-color=red]")

原选择器失效的核心原因 #

CSS属性选择器的多条件（连续写[]）是逻辑与的关系，意味着元素必须同时满足所有括号内的条件。而一个元素的data-color只能有一个值，不可能同时等于blue和red，所以自然没有元素能被选中。

修正后的完整代码示例 #

下面是修改完的可运行代码，我还顺便修正了CSS里无效的display:cell值：

JavaScript

// 初始化元素样式和文本
$("a").each(function() {
 $(this).css('background', $(this).data("color"));
 $(this).text($(this).data("gender"))
});
// 执行筛选并切换显示状态
$("a[data-gender=men][data-color=blue], a[data-gender=men][data-color=red]")
  .removeClass('zoomOut')
  .addClass('zoomIn');

CSS

body {
 background: #20262E;
 padding: 20px;
}
.zoomOut{
 display:none;
}
.zoomIn{
 display:block; /* 替换原无效的display:cell */
 padding: 10px;
 margin: 5px;
}

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a role="button" class="btn btn-default zoomOut" data-color="red" data-size="m" data-gender="men"></a>
<a role="button" class="btn btn-default zoomOut" data-color="green" data-size="s" data-gender="women"></a>
<a role="button" class="btn btn-default zoomOut" data-color="yellow" data-size="s" data-gender="bi"></a>
<a role="button" class="btn btn-default zoomOut" data-color="black" data-size="s" data-gender="bi"></a>
<a role="button" class="btn btn-default zoomOut" data-color="blue" data-size="l" data-gender="bi"></a>
<a role="button" class="btn btn-default zoomOut" data-color="red" data-size="m" data-gender="men"></a>
<a role="button" class="btn btn-default zoomOut" data-color="red" data-size="m" data-gender="men"></a>
<a role="button" class="btn btn-default zoomOut" data-color="red" data-size="m" data-gender="men"></a>
<a role="button" class="btn btn-default zoomOut" data-color="blue" data-size="m" data-gender="men"></a>
<a role="button" class="btn btn-default zoomOut" data-color="blue" data-size="m" data-gender="men"></a>
<a role="button" class="btn btn-default zoomOut" data-color="blue" data-size="m" data-gender="men"></a>
<a role="button" class="btn btn-default zoomOut" data-color="blue" data-size="m" data-gender="men"></a>
<a role="button" class="btn btn-default zoomOut" data-color="khaki" data-size="l" data-gender="women"></a>
<a role="button" class="btn btn-default zoomOut" data-color="red" data-size="m" data-gender="women"></a>
<a role="button" class="btn btn-default zoomOut" data-color="green" data-size="l" data-gender="women"></a>
<a role="button" class="btn btn-default zoomOut" data-color="red" data-size="m" data-gender="women"></a>
<a role="button" class="btn btn-default zoomOut" data-color="green" data-size="l" data-gender="women"></a>
<a role="button" class="btn btn-default zoomOut" data-color="red" data-size="m" data-gender="women"></a>
<a role="button" class="btn btn-default zoomOut" data-color="green" data-size="l" data-gender="women"></a>
<a role="button" class="btn btn-default zoomOut" data-color="red" data-size="m" data-gender="bi"></a>
<a role="button" class="btn btn-default zoomOut" data-color="red" data-size="m" data-gender="men"></a>
<a role="button" class="btn btn-default zoomOut" data-color="blue" data-size="s" data-gender="men"></a>
<a role="button" class="btn btn-default zoomOut" data-color="red" data-size="s" data-gender="men"></a>
<a role="button" class="btn btn-default zoomOut" data-color="grey" data-size="l" data-gender="bi"></a>
<a role="button" class="btn btn-default zoomOut" data-color="blue" data-size="m" data-gender="women"></a>
<a role="button" class="btn btn-default zoomOut" data-color="blue" data-size="m" data-gender="women"></a>
<a role="button" class="btn btn-default zoomOut" data-color="blue" data-size="m" data-gender="women"></a>
<a role="button" class="btn btn-default zoomOut" data-color="blue" data-size="m" data-gender="women"></a>
<a role="button" class="btn btn-default zoomOut" data-color="red" data-size="m" data-gender="men"></a>

内容的提问来源于stack exchange，提问作者Mona Coder