Question

我在这里找到了很好的简单过滤示例，但无法弄清楚如何解决我的问题。

我有带元素的侧边栏

<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>

和产品

<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>

我需要做的是制作一个过滤器，它将使用[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>

Answer 1

filter内的选择器不正确，您需要以下内容：

.filter('[data-cat="' + category + '"], [data-f="' + category + '"]')

jQuery过滤器div具有多个属性

1 个答案:

Here's a fiddle