Javascript 使用JQuery和数据属性进行多重过滤

我正在尝试使用div、JQuery和复选框上的data属性创建一个多重过滤器。选中复选框后，我希望JQuery删除屏幕上的元素，该元素的数据属性不包含所有选定项

例如，一个复选框'values='mens'，另一个复选框是'metal'，则屏幕上与之不匹配的元素将褪色或隐藏

下面是一个带有数据属性的示例div：

<div class="col-md-3 col-sm-4 shop-grid-item" id="BSG016BK" data-attributes='["men's","wayfarer","metal","134","133","black","black"]'></div>

捕获选择值，但我不确定如何收集当前选择的所有值，然后使用该列表开始从div中删除数据属性中不包含这些值的项

---

任何帮助都将不胜感激，或者让我指出正确的方向。我一直在看教程和其他库，但我没有看到任何允许我使用多个源并在数据属性而不是类上进行筛选的内容。

首先，您必须更改您的商店网格项属性，使其如下所示：

<div class="col-md-3 col-sm-4 shop-grid-item" id="BSG016BK" data-attributes="['men\'s','wayfarer','metal','134','133','black','black']">
</div>

之后，您只需获得适当的数据属性，并与过滤器进行比较

---

这里是一个以数组形式显示在控制台中的属性。

首先，您必须更改店铺网格项的属性，使其如下所示：

<div class="col-md-3 col-sm-4 shop-grid-item" id="BSG016BK" data-attributes="['men\'s','wayfarer','metal','134','133','black','black']">
</div>

之后，您只需获得适当的数据属性，并与过滤器进行比较

---

这里是一个以数组形式显示在控制台中的属性。

这里是一个工作jQuery这里是一个工作jQuery谢谢您提供的信息。我修复了数据属性。唯一的问题是，我有多个项目与每个项目的.shop网格项目类循环。我是否应该为每个项目使用$。检查所选项目是否与数据属性中的项目匹配，如果不匹配，则隐藏它们。如果是这样，是否有一种方法可以从不同的复选框中收集所有项目，以列出要从“.filter”复选框中筛选的单词？查看您的代码是a$。每个都是必需的。您在所有项目上检查一个框和环。我认为最好的方法是允许用户选中多个复选框，并用一个按钮应用它（对于性能问题），感谢您提供的信息。我修复了数据属性。唯一的问题是，我有多个项目与每个项目的.shop网格项目类循环。我是否应该为每个项目使用$。检查所选项目是否与数据属性中的项目匹配，如果不匹配，则隐藏它们。如果是这样，是否有一种方法可以从不同的复选框中收集所有项目，以列出要从“.filter”复选框中筛选的单词？查看您的代码是a$。每个都是必需的。您在所有项目上检查一个框和环。我认为最好是允许用户选中多个框，并用一个按钮应用它（针对性能问题）

<div class="col-md-3 col-sm-4 shop-grid-item" id="BSG016BK" data-attributes="['men\'s','wayfarer','metal','134','133','black','black']">
</div>