如何使用两个选择选项过滤元素？

Question

我试图弄清楚为什么我不能在此代码上选择两级过滤器：

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> 

Answer 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');