tengo el siguente filto con checkboxs, la idea es que el usuario seleccione los checkboxs entre 4 categorias y realize un filtro de los elementos cada elemento posee 4 datas: (data-plato , data-coc , data-ingre , data-otro ) con valores numericos
Javascript
$('#prueba').click(function(){
event.preventDefault();
query = new Array(new Array(),new Array(),new Array(),new Array());
$('.platoid:checked').each(
function() {
query[0].push($(this).val());
}
);
$('.coccionid:checked').each(
function() {
query[1].push($(this).val());
}
);
$('.ingredienteid:checked').each(
function() {
query[2].push($(this).val());
}
);
$('.otroid:checked').each(
function() {
query[3].push($(this).val());
}
);
$('.bookitem').not(`[data-plato ~= ${query[0]}]`).hide();
$('.bookitem').not(`[data-coc ~= ${query[1]}]`).hide();
$('.bookitem').not(`[data-ingre ~= ${query[2]}]`).hide();
$('.bookitem').not(`[data-otro ~= ${query[3]}]`).hide();
})
HTML
<div class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-4 bookitem pb-5 text-center"
data-coc="1 2 " data-plato="20 2 10 " data-ingre="5 8 " data-otro=" " id="1">
<img src="img/receta.jpg" class="pb-2" alt="test">
<h2>test</h2>
<hr>
<img src="img/crops/time_small.png" alt="">
<p class="d-inline">10 minutos</p>
<img src="img/crops/cook.png" alt="">
<p class="d-inline">test</p>
<div class="pt-4">
<a href="" class="px-3 py-2 addtocart">Agregar a mi libro</a>
</div>
mi problema es que si el usuario no marca ningun item en alguna de las categorias tira un error de unrecognized expression y si selecciona mas de uno estaria llegando 0,1 por ejemplo
quizas exista tambien una forma mas sensilla de encarar el problema
<div class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-4 bookitem pb-5 text-center" data-coc="1 2 " data-plato="20 2 10 " data-ingre="5 8 " data-otro=" " id="1"> <img src="img/receta.jpg" class="pb-2" alt="test"> <h2>test</h2> <hr> <img src="img/crops/time_small.png" alt=""> <p class="d-inline">10 minutos</p> <img src="img/crops/cook.png" alt=""> <p class="d-inline">test</p> <div class="pt-4"> <a href="" class="px-3 py-2 addtocart">Agregar a mi libro</a> </div> </div>