jquery and javascript filtering issue

Question

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

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

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.

Paste the relevant parts of your code here. What if jsfiddle is down tonight? Your question won't make any sense. — Florian Margaine
– Florian Margaine, Commented May 22, 2012 at 16:49

bygrace · Accepted Answer · 2012-05-22 17:06:30Z

2

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.

answered May 22, 2012 at 17:06

bygrace

6,0081 gold badge37 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

bygrace Over a year ago

We could make a more dynamic version of my first fix if you wanted to add more ranges.

IntricatePixels Over a year ago

This is perfect for now ... I can't thank you enough! I am still learning Javascript and your help is MUCH appreciated.

Collectives™ on Stack Overflow

jquery and javascript filtering issue

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related