Tengo dos casillas de verificación para filtrar recetas (almacenadas en una base de datos) en un sitio web. El filtro de alergia OCULTA todas las recetas con la alergia seleccionada pero el filtro de dieta MUESTRA solo las recetas con la dieta seleccionada. (es decir, si el usuario marca la alergia al maní y sin gluten, se ocultarán las recetas con esos filtros). Ambas casillas de verificación funcionan de forma individual, pero si ambas están marcadas, se muestran las recetas incorrectas. Por ejemplo, lo que quiero que suceda es que si el usuario marca la alergia al maní y la dieta vegana, quiero mostrar recetas que no tengan maní y sean veganas. Básicamente, necesito una forma de realizar un seguimiento de las recetas que se muestran en una casilla de verificación y filtrarlas para la otra casilla de verificación.
A continuación se muestra el código que tengo:
function filterFilesList() { var rows = $('.file-row'); var checkedAllergies = $("#filterControlsAllergies :checkbox:checked"); var checkedDiet = $("#filterControlsDiet :checkbox:checked"); if(checkedAllergies.length && checkedDiet.length){ console.log("both selected"); rows.show(200); var type1 = [] var arr = checkedAllergies.map(function(){ type1.push("." + $(this).val()) }).get(); var type2 = [] var arr = checkedDiet.map(function(){ type2.push("." + $(this).val()) }).get(); //Filter through database and show/hide recipes depending on both checkboxes } else if(checkedAllergies.length){ rows.show(200); var type1 = [] var arr = checkedAllergies.map(function(){ type1.push("." + $(this).val()) }).get(); for (let i = 0; i < type1.length; i++){ $(type1[i]).hide(200); } } else if(checkedDiet.length){ rows.hide(200); var type2 = [] var arr = checkedDiet.map(function(){ type2.push("." + $(this).val()) }).get(); for (let i = 0; i < type2.length; i++){ $(type2[i]).show(200); } } else { rows.show(); } }Tienes dos maneras diferentes de resolver este problema.
Por favor, compruebe el código a continuación:
if(checkedAllergies.length && checkedDiet.length){ rows.hide(200); var type1 = [] checkedAllergies.map(function(){ type1.push("." + $(this).val()) }).get(); //let's create set of allergies recipes, that we need to exclude let allergiesSet = new Set(); for(let i=0;i<type1.length;i++){ allergiesSet.add(type1[i]); } var type2 = [] var arr = checkedDiet.map(function(){ type2.push("." + $(this).val()); }).get(); //Filter through database and show/hide recipes depending on both checkboxes for (let i = 0; i < type2.length; i++){ if(!allergiesSet.has(type2[i])) {$(type2[i]).show(200);}; } }