0

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

4
  • Puedes agregar el HTML para poder ejemplificar el ejercicio, gracias. el 4 nov. 2019 a las 19:36
  • ejemplo de un item <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>
    – shape
    el 4 nov. 2019 a las 20:48
  • ejemplo de un filtro ` <h2>Tipo de coccion</h2> <div class="form-check"> <input class="form-check-input coccionid" type="checkbox" value="1" id="olla"> <label class="form-check-label" for="olla"> olla </label> </div> `
    – shape
    el 4 nov. 2019 a las 20:49
  • Da click en editar y agrega ese HTML en tu pregunta. el 4 nov. 2019 a las 20:51

1 respuesta 1

1

Planteamiento
Por lo que puedo comprobar has hecho que cada elemento tenga un atributo tipo data-plato, data-coc, data-ingre y data-otro. Y que ese elemento sea multivaluado

Y luego recorres los elementos de cada tipo para poder añadir las opciones que tiene cada uno.

Tu problema
No se muestran correctamente ya que no ejecutas correctamente el filtro. La forma más fácil de ejecutarlo es haciendo una función y sacando el array query fuera del evento click (para que se pueda llamar dentro de dicha función) o podrías pasarle el array a la función que también es una posibilidad

Función:
Así es como lo haría yo:

function filtrado(){
    var platos=query[0];
    var coccion=query[1];
    var ingredientes=query[2];
    var otro=query[3];
    $(".bookitem").each(function(){
        //ignoreCase es como bien dice para ignorar las mayusculas
        var pl=$(this).attr("data-plato").ignoreCase;
        var cc=$(this).attr("data-coc").ignoreCase;
        var ingr=$(this).attr("data-ingre").ignoreCase;
        var otr=$(this).attr("data-otro").ignoreCase;
        //Esté if comprueba si cumple todos los requisitos puestos
        if(checkinarray(pl,platos)
            &&checkinarray(cc,coccion)
            &&checkinarray(ingr,ingredientes)
            &&checkinarray(otr,otro)
        ){
            $(this).show();
        }else{
            $(this).hide();
        }
    });
}
function checkinarray(str,ar){
    //Comprobamos si el array está vacio
    if(ar.length>0){
        //Separamos los posibles elementos (si hay más de 1)
        //El trim() sirve para eliminar los espacios sobrantes
        var component=str.trim().split(" ");
        var existe=false;
        for(i=0;i<component.length;i++){
            //El includes detecta si existe en un array un elemento string
            if(ar.includes(component[i])){
                exite=true;
                //El return es para salir del bucle una vez encuentre alguna coincidencia
                return;
            }
        }
        return exite;
    }else{
        //Retornamos true ya que el array está vacio y de está forma admitirá valores
        //vacios
        return true;
    }
}

Tu antiguo código

$('#prueba').click(function(){
         event.preventDefault();

$('#prueba').click(function(){
    event.preventDefault();
    //Creación del array
    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());
        }
    );
    //Eliminamos los $('x').not(`[data-x ~= ${query[x]}]`).hide(); y
    //insertamos
    filtrado();
});

Algunas referencias:
include() (W3School)
ignoreCase (W3School)
trim() (W3School)
split() (W3School)

4
  • dentro de mi codigo al hacer .click deberia seguir armando el array? con los :checked ?
    – shape
    el 5 nov. 2019 a las 0:34
  • Si, solo cambias los $('......').not(.).hide(); por filtrado(); abajo del todo del código lo pone. Aunque lo voy ha separar para que se vea a primera vista
    – Jose
    el 5 nov. 2019 a las 0:36
  • me dice que TypeError: str is undefined , haciendo un console.log(str) dentro de la funcion checkinarray estoy recibiendo undefined
    – shape
    el 5 nov. 2019 a las 0:47
  • 1
    lo solucione modificando var pl=$(this).attr("data-plato").ignoreCase; a: var pl=$(this).data("plato"); para todos los casos
    – shape
    el 5 nov. 2019 a las 0:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.