具有多属性的jQuery筛选器div

我在这里找到了一些简单过滤的好例子，但我不知道如何解决我的问题

我有一个带有元素的侧边栏

<div class="sidebar">
  <div class="category" data-filter="A">Cat 1</div>
  <div class="category" data-filter="B">Cat 2</div>
  <div class="category" data-filter="A - 01">Cat 3</div>
  <div class="category" data-filter="B - 01">Cat 4</div>
</div>

第一类
第2类
第3类
第四类

及产品

<div class="products">
  <div class="product" data-cat="A" data-f="A - 01">Product 1</div>
  <div class="product" data-cat="B" data-f="B - 01">Product 1</div>
</div>

产品1
产品1

我需要做的是制作一个使用[data filter]属性的过滤器，并在[data cat]或[data-f]中显示具有该属性的div。可能吗

这就是我一直使用的jQuery

<script>
    var $products = jQuery('.product');
jQuery('.category').click(function(e){
    e.preventDefault();
    // get the category from the attribute
    var category = jQuery(this).data('filter');
       $products.hide().filter('[data-cat="]' + category + '"]').show();
});
</script>

var$products=jQuery（'.product'）；
jQuery（'.category'）。单击（函数（e）{
e、 预防默认值（）；
//从属性中获取类别
var category=jQuery（this）.data（'filter'）；
$products.hide（）；
});

过滤器内的选择器不正确，您需要类似以下内容：

.filter（'[data cat=“”+category+']，[data-f=“”+category+']”）

---

data-*

的值不能有空格这是很有可能的，请发布您尝试使用的jQuery。我将有两个筛选器，一个用于data cat，另一个用于data-f。这类似于在MS Excel上选择要隐藏/显示的过滤器时过滤器的工作方式；jQuery（'.category'）。单击（函数（e）{e.preventDefault（）；//从属性var category=jQuery（this.data（'filter'）；$products.hide（）.filter（'[data cat=“]'+category+'”）.show（）；'）我的JSON API调用提取数据，并给我这些带有空格的数据。我不能改变，你是个救命恩人！