尝试使用HTML数据属性构建jQuery过滤器

Question

尝试获取并比较我点击的链接的数据属性，并将其与DOM中可能匹配的任何内容进行比较。 1.）点击链接（获取数据属性） 2.）获取该数据属性的内部内容，并找到它在DOM中可能匹配的任何内容 3.）如果匹配，添加类“show”和类“隐藏”其他所有内容。

我已经获得了能够获取所点击属性的内容。

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

data-category-type =食谱类别，如早餐（5），晚餐（6）等。 data-tag-type =食谱标签，如素食主义者（1），无麸质（2）等。

Answer 1

试试这个：

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