我想弄清楚为什么我无法在此代码上选择两级过滤器:
a[data-gender=men][data-color=blue][data-color=red]
我想要做的是按性别过滤产品,蓝色和红色两种颜色。仅按一种颜色或一种性别进行过滤工作正常。
// find elements
$("a").each(function() {
$(this).css('background', $(this).data("color"));
$(this).text($(this).data("gender"))
});
$("a[data-gender=men][data-color=blue][data-color=red]").removeClass('zoomOut').addClass('zoomIn');

body {
background: #20262E;
padding: 20px;
}
.zoomOut{
display:none;
}
.zoomIn{
display:cell;
}

<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>
&#13;
答案 0 :(得分:1)
试试这样:
//Use comma separated conditions for OR, so data-gender=men and data-color=blue
//OR data-gender=men and data-color=red
$("a[data-gender=men][data-color=blue], a[data-gender=men][data-color=red]").removeClass('zoomOut').addClass('zoomIn');