CODEWITHSUNDEEP
javascriptjqueryfilter
kennycrippen
kennycrippen

Reputation: 39

jQuery Filter List By 2 Criteria with Anchor Tags

I am building a jQuery filter that filters a list by 2 sets of criteria (fruit type and color). For example, if the user filters by the fruit type "Berry" only berries will be shown. Then, if they filter by the fruit color "Red" only red berries will be shown.

I think the problem is with the way my fruitColor and fruitType variables are set up. I am trying to make the values of those variables equal to whatever the data-type of the anchor tag is that has been clicked on. My code follows, thank you!

jQuery:

$(document).ready(function() 
        { 
            $("ul.filter li a").click(function() 
            { 
                var fruitColor    = $('ul#fruitColor li a').attr('data-value'); 
                var fruitType    = $('ul#fruitType li a').attr('data-value');
                var fruitColorSelector = ''; 
                var fruitTypeSelector = '';         

                if (fruitColor == "all" && fruitType == "all") 
                { 
                    //show all items 
                    $(".item").show(); 
                } 
                else 
                { 
                    if (fruitType != "all") 
                    { 
                        fruitTypeSelector = '.' + fruitType 
                    } 

                    if (fruitColor != "all") 
                    { 
                        fruitColorSelector = '.' + fruitColor 
                    } 

                    $(".item").hide(); 
                    $(fruitTypeSelector + fruitColorSelector).show(); 
                } 

            }); 
        });

HTML:

Select Color Category: 
<ul class="filter" id="fruitColor"> 
    <li><a data-value="all">Any Color</a></li> 
    <li><a data-value="red">Red</a> </li>
    <li><a data-value="blue">Blue</a> </li>
    <li><a data-value="yellow">Yellow</a> </li>
</ul> 
<br> 
Select Fruit Type: 
<ul class="filter" id="fruitType"> 
    <li><a data-value="all">Any Type</a> </li>
    <li><a data-value="fruit">Fruit</a> </li>
    <li><a data-value="berry">Berry</a> </li>
</ul>


<br> 



<ul> 
    <li class="item red fruit">Apple</li> 
    <li class="item blue fruit">Grape</li> 
    <li class="item yellow fruit">Lemon</li> 
    <li class="item red fruit">Cherry</li> 
    <li class="item yellow fruit">Banana</li> 
    <li class="item red berry">Strawberry</li> 
    <li class="item blue berry">Blueberry</li> 
    <li class="item red berry">Raspberry</li> 
    <li class="item yellow fruit">Pineapple</li> 
    <li class="item yellow berry">Yellowberry</li> 
</ul>

Upvotes: 0

Views: 659

Answers (3)

Aguardientico
Aguardientico

Reputation: 7779

Change the js to looks like:

$(document).ready(function() 
        { 
            $("ul.filter li a").click(function() 
            { 
                $(this).closest('ul').find('a').removeClass('selected');
                $(this).addClass('selected');
                var fruitColor    = $('ul#fruitColor li a.selected').data('value'); 
                var fruitType    = $('ul#fruitType li a.selected').data('value');
                var fruitColorSelector = ''; 
                var fruitTypeSelector = '';         

                if (fruitColor == "all" && fruitType == "all") 
                { 
                    //show all items 
                    $(".item").show(); 
                } 
                else 
                { 
                    if (fruitType != "all") 
                    { 
                        fruitTypeSelector = '.' + fruitType 
                    } 

                    if (fruitColor != "all") 
                    { 
                        fruitColorSelector = '.' + fruitColor 
                    } 

                    $(".item").hide(); 
                    $(fruitTypeSelector + fruitColorSelector).show(); 
                } 

            }); 
        });

The key is mark the selected anchor with something. I used addClass/removeClass to do the work.

Upvotes: 2

Sushanth --
Sushanth --

Reputation: 55750

You have some major flaws in your code..

The code you have written might actually work in the case of a select which always has a value.

But $('ul#fruitColor li a') gives you all the anchors and you will always get the value of the first item

Upvotes: 1

sferret
sferret

Reputation: 461

if (fruitType != "all") 
{ 
    fruitTypeSelector = '.' + fruitType ; // need semi colon 
 } 

 if (fruitColor != "all") 
 { 
      fruitColorSelector = '.' + fruitColor ; // needs a semi colon
 }

Syntax errors - missing sem-colons ( see above) I think sushanth is correct as well

Upvotes: 1

Related Questions