Javascript 如何创建多过滤器库，如woocommerce/电子商务产品过滤器

我需要一个多过滤器画廊，如woocommerce/电子商务产品过滤器

下面是三种类型的过滤器下拉列表颜色、大小和形状

例如，如果我将选择颜色：红色和绿色，大小：小和形状：圆形

因此，它应该过滤哪些框具有以下类红色+小+圆形，哪些框具有以下类绿色+小+圆形

我需要在过滤器名称行中显示选定的过滤器名称

红色


绿色






小的


中等






广场


圆形的



复位

shape：（此处将显示所选的形状名称）
color：（此处将显示所选的颜色名称）
尺码：（此处将显示所选尺码名称）
红色小广场
绿色中圆形
红色中圆形
绿色小广场
（函数（$）{
$（文档）.ready（函数（）{
//场馆筛选脚本
$（“.multifilter gallery按钮”）。单击（函数（）{
var值=$（this.attr（'data-filter'）；
如果（值=“全部”）
{
$（此）.addClass（“活动”）；
$（“.multifilter gallery button”）.not（this）.removeClass（'active'）.find（'input[type=“checkbox”]）.attr（'checked'，false）；
$（'multifilter gallery box'）。show（'1000'）；
}
其他的
{
$（'.multifilter gallery button.active[data filter=“all”]”）。removeClass（'active'）；
if（$（this）.hasClass（“活动”））{
$（此）.removeClass（“活动”）；
$（this.find（'input[type=“checkbox”]）.attr（'checked'，false）；
}否则{
$（此）.addClass（“活动”）；
$（this.find（'input[type=“checkbox”]）.attr（'checked'，true）；
}
if（$（'.multifilter gallery button.active'）.length）{
var类=“”；
$（'.multifilter gallery button.active'）。每个（函数（索引，el）{
class++'.++$（this.attr（'data-filter'）；
}); 
$（“.multifilter gallery box”）.not（classes.hide（'3000'）；
$（'.multifilter gallery box'）。过滤器（类）。显示（'3000'）；
}否则{
$（'.multifilter gallery按钮[data filter=“all”]'）。单击（）；
}
}
});
$（'ul.not close下拉列表'）。在（'click'，函数（事件）{
event.stopPropagation（）；
});
///////////
})
})（jQuery）；

希望它能解决您的问题。工作完美。 删除您的js代码，并包括此代码

（函数（$）{
$（文档）.ready（函数（）{
$（'.multifilter gallery按钮'）。单击（函数（）{
var值=$（this.data（'filter'）；
如果（值==“全部”）{
$（'.multifilter gallery button'）.removeClass（'active'）；
$（'.multifilter gallery按钮输入[type=“checkbox”]'）.prop（'checked'，false）；
$（this.addClass（'active'）；
$（'.multifilter gallery box'）。显示(