时间戳

首页 > 解决方案 > 如何使用两个选择选项过滤元素？

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

问题描述

我正在尝试找出为什么我无法在此代码上选择两级过滤器：

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>

标签： javascriptjquery

解决方案

试试这样：

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

推荐阅读