Question

I am having two issues with my JS code here and any help is greatly appreciated …

1. I need to add a logic so that the “Over 50” options is displayed in the filtering list when there’s a product priced say $499. with my current implementation this is not working.

   <li>
       <!-- over 50 product is not showing when filtering -->
       <a href="/product-three">Product Four</a><br>
       <span id="lowestPriceRange">400</span>
       <span id="highestPriceRange">400</span>
   </li>
   
   
   // Because I need to handle it here somehow but I'm stuck
   var hidePrices = {};
   hidePrices[0] = true;
   hidePrices[10] = true;
   hidePrices[20] = true;
   hidePrices[30] = true;
   hidePrices[40] = true;
   hidePrices[50] = true;
   
   $('#products').find('span').each(function(i, el){
       var key = parseInt(Math.floor($(this).html() / 10) * 10, 10);
       hidePrices[key] = false;
   });
   
   $('#filterByPrice').find('li').each(function(i, el){
       if (hidePrices[Number($(this).find('a').attr('name'))]) {
           $(this).hide();
       }
   });
   

2. It’s hiding some products that I want to display. For example, I want to show a product priced between $40 – $60 when the $40 – $50 filtering option is selected.

Answer 1

Here I fixed your issues: http://jsfiddle.net/qNFWM/7/

To fix the first issue I added this because your key was 400:

if (key > 50) key = 50;

To fix the second issue I changed this:

return (minProductPrice >= minSelectedPrice && maxProductPrice <= maxSelectedPrice);

To this:

return ((minProductPrice >= minSelectedPrice &&  minProductPrice <= maxSelectedPrice) || (maxProductPrice >= minSelectedPrice &&  maxProductPrice <= maxSelectedPrice));

So that only the min or the max had to be in the range.