я просачиваюсь с checkboxs jquery

у меня есть siguente filto с checkboxs, идея состоит в том, чтобы пользователь выбрал checkboxs между 4 категориями, и realize фильтр элементов каждый элемент обладает 4 датами: (дата - тарелка, дата - coc, Вы восходите - ingre, датирует другой) с численными значениями

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>

моя проблема состоит в том, что, если пользователь не отмечает никакой статьи в какой-то из категорий, Вы бросаете ошибку unrecognized expression, и если Вы выбираете больше одного, прибывал бы 0,1 например

может быть, существовала также форма больше sensilla того, чтобы противостоять проблему

0
задан 05.11.2019, 01:39
1 ответ

Планирование
, поскольку я могу подтверждать, ты способствовал тому, чтобы у каждого элемента был признак тип data-plato, data-coc, data-ingre и data-otro. И что этого элемента было , мультиоцененные

, И потом ты пробегаешь элементы каждого типа, чтобы мочь aГ±adir выборы, которые есть у каждого.

Твоя проблема
не появляются правильно, так как ты не выполняешь правильно фильтр. Форма mГЎs fГЎcil выполнения этого - делая одну funciГіn и доставая array query вне события click (для того, чтобы было возможно звонить внутри счастья funciГіn), или podrГ-схвати перемещать его array в нее funciГіn, что tambiГ©n является возможностью

FunciГіn:
AsГ - как это harГ - в меня:

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;
    }
}

старые Ты 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();
});

Какие-то ссылки:
include () (W3School)
ignoreCase (W3School)
trim () (W3School)
split () (W3School)

1
ответ дан 01.12.2019, 12:48
  • 1
    внутри моего кода, сделав .click, он был бы должен продолжать вооружать array? с ними: checked? – shape 05.11.2019, 02:34
  • 2
    Если, ты только меняешь $('......').not(. ).hide(); из-за filtrado(); внизу совсем có я говорю, что он это помещает. Хотя я это иду есть отделять для того, чтобы видели на первый взгляд – Jose 05.11.2019, 02:36
  • 3
    он говорит мне, что TypeError: str is undefined, делая один console.log (str) внутри функции checkinarray я получаю undefined – shape 05.11.2019, 02:47
  • 4
    я это решил изменяя var pl=$(this).attr("data-plato").ignoreCase; в: var pl=$(this).data("plato"); для всех случаев – shape 05.11.2019, 02:51

Теги

Похожие вопросы