Estoy intentando crear una búsqueda de 3 campos, ocultando y mostrando tarjetas dependiendo de si cumplen con los criterios. query1 y query2 funcionan bien, pero por alguna razón, query3 no funciona según lo previsto. Utilicé un registro de la consola para averiguar qué está sucediendo y el resultado es desconcertante.
const marketSearchFunction = function() { const query1 = $('#market-search').val().toLowerCase(); const query2 = parseFloat($('#market-min').val()); const query3 = parseFloat($('#market-max').val()); let boolean1 = false let boolean2 = isNaN(query2) ? true : false let boolean3 = isNaN(query3) ? true : false $('.market-frame').each(function(){ const price = parseFloat($(this).find('.price').data('value')) boolean1 = $(this).text().toLowerCase().indexOf(query1) !== -1 boolean2 = (boolean2 ? boolean2 : (price >= query2)) boolean3 = (boolean3 ? boolean3 : (price <= query3)) console.log(price, query3, boolean3, (price <= query3)) showCard($(this), (boolean1 === boolean2 === boolean3)) }); }Aquí está la salida del registro de la consola
¿Por qué el sistema establece boolean3 en verdadero, cuando el valor de la comparación es falso?
1800 NO es inferior a 1500, pero lo establece en VERDADERO. Reinicié el servidor, moví el código. No estoy seguro de lo que estoy haciendo mal.
No es una respuesta directa a su pregunta, pero espero que sea una solución para su problema.
Independientemente de los errores lógicos en su código actual, creo que puede simplificar su lógica y, por lo tanto, hacerla menos propensa a errores y más fácil de razonar. Creo que el problema central es que está compartiendo las variables boolean* en todas las iteraciones.
También use nombres de variables significativos:
const marketSearchFunction = function() { const query = $('#market-search').val().toLowerCase(); let minPrice = parseFloat($('#market-min').val()); let maxPrice = parseFloat($('#market-max').val()); // Using -Infinity and Infinity lets us keep the price comparison // logic simple if (isNaN(minPrice)) minPrice = -Infinity; if (isNaN(maxPrice)) maxPrice = Infinity; $('.market-frame').each(function(){ const price = parseFloat($(this).find('.price').data('value')); const shouldShow = $(this).text().toLowerCase().indexOf(query1) !== -1 && price >= minPrice && price <= maxPrice; showCard($(this), shouldShow); }); }Considera lo siguiente.
const marketSearchFunction = function() { var query = [ $('#market-search').val().toLowerCase(), parseFloat($('#market-min').val()), parseFloat($('#market-max').val()) ]; var bool = [ false, true, true ]; console.log(query, bool); $('.market-frame').each(function(i, el) { var price = parseFloat($(el).find('.price').data('value')); bool[0] = $(el).text().toLowerCase().indexOf(query[0]) !== -1; bool[1] = bool[1] && price >= query[1]; bool[2] = bool[2] && price <= query[2]; console.log(price, bool); showCard($(el), bool[0] && bool[1] && bool[2]); }); }Parece que está intentando realizar algún tipo de validación.
Recuerda la siguiente lógica:
| A | B | A y B |
|---|---|---|
| verdadero | verdadero | verdadero |
| verdadero | falso | falso |
| falso | verdadero | falso |
| falso | falso | falso |
A medida que itera sobre los elementos, puede establecer el valor usando esta lógica. Creo que es más rápido que el Operador Ternario.
Puede que me confunda un poco tu proceso, pero creo que esto te ayudará.