Необходимо, чтобы с помощью jQuery появлялся блок имеющий два определенных класса. Например, если я делаю фильтр в интернет магазине и мне нужно чтобы после выбора одновременно цвета и размера товара, на экран выводились товары такого размера, среди всех товаров такого цвета. Пока что он выводит только все товары с таким цветом и все товары с таким размером(они не только необходимого цвета). Как исправить? Я задаю всем товарам магазина классы с их цветом и размером.
function FILT(){
var color;
var first_check = false;
$(".monitors").hide();
if ($('#c_black').is(':checked')){
$(".black").show();
first_check=true;
$(".black").addClass('chosen');
}
if ($('#c_grey').is(':checked')){
$(".grey").show();
first_check=true;
$(".grey").addClass('chosen');
}
if ($('#c_white').is(':checked')){
$(".white").show();
first_check=true;
$(".white").addClass('chosen');
}
if (first_check===true) {
if ($('#sml').is(':checked')){
$(".sml.chosen").show();
}
if ($('#mid').is(':checked')){
$(".lar.chosen").show();
}
if ($('#lar').is(':checked')){
$(".lar.chosen").show();
}
}
else{
if ($('#sml').is(':checked')){
$(".sml").show();
}
if ($('#mid').is(':checked')){
$(".lar").show();
}
if ($('#lar').is(':checked')){
$(".lar").show();
}
}
var count = $(':checkbox:checked').length;
if (count==0) {
$(".monitors").show();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Айди размеров (lag,mid...)- это от чекбоксов, а классы размеров от товаров