Jquery 修改此函数以按数据属性而不是按类显示/隐藏

我想通过数据属性而不是类来使用这个show/hide函数，但是我很难正确使用语法

我知道是这样的

$（“li[data color=“+this.value+”]））.show（）但我无法让它工作和/或修改函数使其工作

我正在使用该功能按各种属性（即颜色、产品类别、场合等）过滤衣服，我在这里发布了一个简单示例：

请参阅此小提琴以了解工作示例：

请注意，您将小提琴中的“all”与“all”进行了比较，但不匹配。
适合我：（第16行）@valtron-很高兴知道我的语法正确；-）我该如何使用它来通过数据属性而不是类进行过滤？@raphaelvalerio-我无法对你的帖子进行投票，因为你已经删除了它，但我想让你大喊一声，告诉我我的语法有什么问题（我在数据颜色属性的值周围缺少引号）：-DOMG！这太完美了：-D和我的小提琴打字错误（我把它归咎于我试图弄明白这一点的头痛；-））
$('#filterOptions li a').click(function () {
    var ourClass = $(this).attr('class');
    $('#filterOptions li').removeClass('active');
    $(this).parent().addClass('active');
    if (ourClass == 'all') {
        $('#content').find('.item').show();
    } else {
        $('#content').find('.item:not(.' + ourClass + ')').hide();
        $('#content').find('.item.' + ourClass).show();
    }
    return false;
});

$(document).ready(function () {
    $('#filterOptions li a').click(function () {
        // fetch the class of the clicked item
        var ourDataAttr = $(this).data('color');
        // reset the active class on all the buttons
        $('#filterOptions li').removeClass('active');
        // update the active state on our clicked button
        $(this).parent().addClass('active');
        if (ourDataAttr == 'All') {
            // show all our items
            $('#content').find('.item').show();
        } else {
            // hide all elements that don't share ourClass
            $('#content').find('.item:not([data-color="' + ourDataAttr + '"])').hide();
            // show all elements that do share ourClass
            $('#content').find('.item[data-color="' + ourDataAttr + '"]').show();
        }
        return false;
    });
});