尝试使用HTML数据属性构建jQuery筛选器

尝试获取并比较链接的数据属性时，我单击并将其与DOM中可能匹配的任何内容进行比较。 1.单击链接以获取数据属性 2.获取该数据属性的内部内容，并在DOM中查找它可能匹配的任何内容 3.如果有匹配项，则添加类show和类hide

我已经能够获取单击的属性的内容

$j(filter_cat_link).click(function(){
    var filter_cat_attr = $j(this).attr("data-category-id");
});

过滤链接：

<a data-category-id="breakfast"  href="#">Breakfast</a>    
<a data-tag-id="vegan" href="#">Vegan</a>

过滤内容：

<div data-category-type="breakfast" data-tag-type="vegan" class="recipe col-lg-4 col-md-4 col-sm-4 col-xs-6">    
<div data-category-type="breakfast" data-tag-type="vegan" class="recipe col-lg-4 col-md-4 col-sm-4 col-xs-6">

DOM对象：

<div data-category-type="4" data-tag-type="1 5 6" class="recipe col-lg-4 col-md-4 col-sm-4 col-xs-6"></div>    
<div data-category-type="5" data-tag-type="1 5" class="recipe col-lg-4 col-md-4 col-sm-4 col-xs-6"></div>

数据类别类型=食谱类别，如早餐5、晚餐6等。 数据标签类型=配方标签，如素食1号、无麸质2号等

试试这个：

$j(filter_cat_link).on('click', function(){

    var filter_cat_attr = $(this).data('category-id'),
        $divs = $j('div.recipe'),
        $matches = $divs.filter('[data-category-id="'+ filter_cat_attr + '"]');

    // clear classes
    $divs.removeClass('show hide'); 

    // add show class to matching divs and hide the rest
    $matches.addClass('show');
    $divs.not($matches).addClass('hide');
});

更新：

要搜索并匹配具有多个值的元素，请执行以下操作：

var filter_cat_attr = $(this).data('category-id');
    categories = filter_cat_attr & filter_cat_attr.split(' '),
    $divs = $j('div.recipe');

// categories will be an array of categories
// or undefined if no data attribute is present

var $matchies = $divs.filter(function(){
    var $this = $(this), categoryId = $this.data('category-id');
    return ~categories.indexOf(categoryId); // returns true on matching category
});

// do something with $matchies...

---

你试过使用这种方法吗？您可能可以执行类似$'a'.filter'[data category id='Breakth']之类的操作来过滤特定的数据属性。@aug我查看了。。。问题是有很多可能匹配的数字。正如你在截图中看到的，我可以点击各种各样的过滤器，它们有自己的数据cat链接值；e、 g.，1，2，3，4必须匹配到recipes data category type=1 4 7我需要一个能够匹配和比较所有潜在可能性的真正强大的函数。希望这有意义！谢谢非常接近。。。问题是，当我点击过滤器链接时；e、 g.，1，2，3匹配1和2的任何div都会出现，但一旦我单击3，前两个就会从DOM中删除。简言之，即使我选择了一个不匹配的过滤器，前两个实际匹配的过滤器也需要保留在DOM中。@JustinMeyers我昨天没有注意到您有空格分隔的值，所以我添加了一个如何解决该问题的示例。没有从DOM中删除任何内容-这只是更改此处的CSS属性display:none/block的问题。让我知道你是否能够解决你的问题，或者你是否需要更多的帮助谢谢！是的，如果其中一个过滤器不匹配，它仍然会删除所有配方。它仍然不会保留真正匹配的配方；e、 过滤链接：1和2匹配，但我点击3不匹配任何东西所有的食谱都消失了。