I am attempting to create a 3 field search, hiding and showing cards depending on if they meet the criteria. query1, and query2 work just fine, but for some reason, query3 doesn't work as intended. I used a console log to figure out what is happening and the result are baffling.
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))
});
}
Here is the console log output
Why does the system set boolean3 to true, when the value of the comparison is false?
1800 is NOT less than 1500, yet it sets it to TRUE. I restarted the server, I moved the code about. I'm not sure what I'm doing wrong.
Not a direct answer to your question but hopefully a fix for your problem.
Regardless of the logic errors in your current code, I think you can simplify your logic and therefore make it less error prone and easier to reason about. I believe the core issue is that you are sharing the boolean* variables across all iterations.
Also use meaningful variable names:
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);
});
}
Consider the following.
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]);
});
}
It looks like you are trying to perform some type of validation.
Remember the following logic:
| A | B | A && B |
|---|---|---|
| true | true | true |
| true | false | false |
| false | true | false |
| false | false | false |
As you iterate over the items, you can setting the value using this logic. It's faster than the Ternary Operator, I think.
I might be a little confused by your process, but I think this will help you.