Javascript 优化jQuery选择器

我正在构建一个简单的产品过滤器，并将规格分为不同的类型

我希望我的逻辑是：

如果选择两个规格，每个规格来自不同的类型，则产品应匹配这两个选择

如果选择3个规格，2个来自同一类型，另一个来自另一类型，则产品应匹配单个类型的选择，以及存在2个相同类型的选择

例如：

类型可以是大小和颜色

我从尺寸中选择“大”，从颜色中选择“红”。 显示的产品是大的和红色的

我从尺寸中选择“大”，从颜色中选择“红”和“蓝”。 所示产品为大尺寸（红色或蓝色）

我已使用现有函数创建了一个代码段：

jQuery（'.Spec'）。单击（函数（）{
jQuery（“.Product”）.fadeOut（200）；
sClasses=''；
jQuery（'.Spec:checked'）。每个（函数（）{
sClasses+='.SP_'+jQuery（this.attr（'TypeID'）++''+jQuery（this.attr（'ValueID'））；
});
如果（sClasses==''）{
sClasses='.Product'
}
控制台日志（sClasses）
jQuery（sClasses）.fadeIn（200）；
});

大的
小的
红色
蓝色
大红产品
大型蓝色产品
小红产品
小型蓝色产品
您需要添加一个
，
：


jQuery（'.Spec'）。单击（函数（）{
jQuery（“.Product”）.fadeOut（200）；
sClasses=''；
jQuery（'.Spec:checked'）。每个（函数（i）{
sClasses+='.SP_'+jQuery（this.attr（'TypeID'）++''+jQuery（this.attr（'ValueID'））；
sClasses+=jQuery（'.Spec:checked'）。length-1===i？“：”，；//您需要添加此行
});
如果（sClasses==''）{
sClasses='.Product'
}
控制台日志（sClasses）
jQuery（sClasses）.fadeIn（200）；
});

大的
小的
红色
蓝色
大红产品
大型蓝色产品
小红产品
小型蓝色产品
您需要添加一个
，
：


jQuery（'.Spec'）。单击（函数（）{
jQuery（“.Product”）.fadeOut（200）；
sClasses=''；
jQuery（'.Spec:checked'）。每个（函数（i）{
sClasses+='.SP_'+jQuery（this.attr（'TypeID'）++''+jQuery（this.attr（'ValueID'））；
sClasses+=jQuery（'.Spec:checked'）。length-1===i？“：”，；//您需要添加此行
});
如果（sClasses==''）{
sClasses='.Product'
}
控制台日志（sClasses）
jQuery（sClasses）.fadeIn（200）；
});

大的
小的
红色
蓝色
大红产品
大型蓝色产品
小红产品
小型蓝色产品
您可以创建一个选择器，如


jQuery（函数（$）{
变量$specs=$（'.Spec'）；
var类型=[]；
$specs.each（函数（）{
var type=$（this.attr（'TypeID'）；
if（$.inArray（类型，类型）=-1）{
类型。推（类型）；
}
});
变量$products=$（'.Product'）；
$specs.单击（函数（）{
var$selected=$products；
$。每个（类型、功能（i、类型）{
var$checked=$specs.filter（'[TypeID=“'+type+']：checked'）；
如果（$checked.length）{
变量选择器=$checked.map（函数（el）{
返回'.SP\'+type+'\'+$（this.attr（'ValueID'）；
}).get（）；
$selected=$selected.filter（selector.join（））；
}
});
$selected.show（）；
$products.not（$selected）.hide（）；
});
})

大的
小的
红色
蓝色
大红产品
大型蓝色产品
小红产品
小型蓝色产品
您可以创建一个选择器，如


jQuery（函数（$）{
变量$specs=$（'.Spec'）；
var类型=[]；
$specs.each（函数（）{
var type=$（this.attr（'TypeID'）；
if（$.inArray（类型，类型）=-1）{
类型。推（类型）；
}
});
变量$products=$（'.Product'）；
$specs.单击（函数（）{
var$selected=$products；
$。每个（类型、功能（i、类型）{
var$checked=$specs.filter（'[TypeID=“'+type+']：checked'）；
如果（$checked.length）{
变量选择器=$checked.map（函数（el）{
返回'.SP\'+type+'\'+$（this.attr（'ValueID'）；
}).get（）；
$selected=$selected.filter（selector.join（））；
}
});
$selected.show（）；
$products.not（$selected）.hide（）；
});
})

大的
小的
红色
蓝色
大红产品
大型蓝色产品
小红产品
小型蓝色产品
选择大的红色和蓝色，你也会看到小的：））嗨，这不符合要求，因为当你选择大的和红色时，它也会显示小的产品。@madalinivascu是的！刚刚发布了缺少的内容。选择大红色和蓝色您也会看到小的：））嗨，这不符合要求，因为当您选择大红色时，它也会显示小的产品。@madalinivascu耶！刚刚发布了丢失的内容。