klemme 3 Posting Whiz in Training

Hi all,

I am creating a function, that filters products, that are allready loaded into the DOM.

JSFiddle: http://jsfiddle.net/Klemme/8CFVa/2/

Please read on, two get the issue :-)

In each product div, I have listet an HTML5 data attribut like this example:

data-options="{"brand":"acer","screenSize":"17","processor":"intel","grafik":"intel"}"

I have 2 groups of checkboxes working now, that makes it possible to show/hide products, based on the value of the checked checkbox, matched against the corresponding value in each products data-options attributte.

It is not dynamic, and I have realized that whenever I want to add more sort options (more check boxes), I have to run through a massive amount of if/else statements, looking for whatever groups has one/more checked value(s) or none at all.

I need to be able to run through it without having to create dusins of if/else checking different checked groups.

To get the checked values for each group I have this short function, taking the name of the group as a parameter:

function markedGroup( groupName )
{
    // Create an array of text elements
    // Used to match against HTML5 data-options atr. in each product.
    searchFilters = $( 'input[name=' + "'" + groupName + '[]\']:checked' ).map( function() 
    { 
        return $( this ).val(); 
    }).get();   

    var searchValues = [];
    $.each( searchFilters, function( key, value )
    {               
        searchValues.push( value.toString() )
    }); 
    return searchValues;
}

With only two sorting options, I allready have 3 options two check for: (Working now)

  • Is both groups checked?
  • Is only the first group checked, and the second unchecked?
  • Is only the second group checked, and the first unchecked?

My filters are listed as checkgroups like this:

<!-- FILTERS - TOP TWO ARE WORKING -->
    <p><b>Brands:</b></p>
    <input type="checkbox" name="brand[]" class="cb" value="acer" /><p class="checkbox_text">Acer</p><br />
    <input type="checkbox" name="brand[]" class="cb" value="toshiba" /><p class="checkbox_text">Toshiba</p><br />
    <input type="checkbox" name="brand[]" class="cb" value="lenovo" /><p class="checkbox_text">Lenovo</p><br />
    <input type="checkbox" name="brand[]" class="cb" value="asus" /><p class="checkbox_text">Asus</p>

    <br /><br />

    <p><b>Screensizes:</b></p>
    <input type="checkbox" name="screen[]" class="cb" value="17" /><p class="checkbox_text">17"</p><br />
    <input type="checkbox" name="screen[]" class="cb" value="16" /><p class="checkbox_text">16"</p><br />
    <input type="checkbox" name="screen[]" class="cb" value="15" /><p class="checkbox_text">15"</p><br />
    <input type="checkbox" name="screen[]" class="cb" value="14" /><p class="checkbox_text">14"</p>

    <br /><br />

    <!-- I ALSO NEED TO MAKE THE TWO GROUPS BELOW WORK, AND EVEN MORE - SO MY JS BELOW NEEDS TO BE MORE DYNAMIC -->

    <p><b>Processors:</b></p>
    <input type="checkbox" name="processor[]" class="cb" value="intel" /><p class="checkbox_text">Intel</p><br />
    <input type="checkbox" name="processor[]" class="cb" value="amd" /><p class="checkbox_text">Amd</p>

    <br /><br />

    <p><b>Graphics:</b></p>
    <input type="checkbox" name="grafik[]" class="cb" value="intel" /><p class="checkbox_text">Intel</p><br />
    <input type="checkbox" name="grafik[]" class="cb" value="amd" /><p class="checkbox_text">Amd</p>

I listen for a change on the class "cb", and the run my filter function, that shows/hides the products.
It is working fine, with the TWO first filters (brand & screen)

FILTER FUNCTION:

$( '.cb' ).on( 'click', function( e ) 
    {           
        // If any marked checkboxes
        if( $( 'input[type="checkbox"]:checked' ).length > 0 ) 
        {           
            // First, hide all products
            $( '.produkt_gruppe_div' ).hide();

            // If both the brand & screen groups have any values            
            if( markedGroup( 'brand' ).length > 0 && markedGroup( 'screen' ).length > 0 )
            {
                console.log('screen & brand');

                $( '.produkt_gruppe_div' ).each( function( index, element )
                {
                    var div = $( this );

                    // Brand
                    $.each( markedGroup( 'brand' ), function( key, value ) 
                    {                       
                        if( div.data( 'options' ).brand === value  )
                        {
                            // Screen 
                            $.each( markedGroup( 'screen' ), function( key, value ) 
                            {
                                if( div.data('options').screenSize === value  )
                                {
                                    div.show();
                                }
                            });
                        }
                    });                 
                });     
            }
            // If only the screen group has any values
            else if( markedGroup( 'brand' ).length == 0 && markedGroup( 'screen' ).length > 0 )
            {
                console.log('screen');

                $( '.produkt_gruppe_div' ).each( function( index, element )
                {
                    var div = $( this );

                    // Screen 
                    $.each( markedGroup( 'screen' ), function( key, value ) 
                    {
                        if( div.data('options').screenSize === value  )
                        {
                            div.show();
                        }
                    });             
                });
            }
            // If only the brand group has any values
            else if( markedGroup( 'brand' ).length > 0 && markedGroup( 'screen' ).length == 0 )
            {
                console.log('brand');

                $( '.produkt_gruppe_div' ).each( function( index, element )
                {
                    var div = $( this );

                    // Brand 
                    $.each( markedGroup( 'brand' ), function( key, value ) 
                    {
                        if( div.data('options').brand === value  )
                        {
                            div.show();
                        }
                    });             
                });
            }
        }
        // NONE checked - Display all products on the page again
        else
        {
            $( '.produkt_gruppe_div' ).show();
        }
    });

As you can see on the jsfiddle, I have only bothered to create the different checked scenarious on the top two groups.

Anyone has input on how I can rewrite/OPTIMIZE it, and make it dynamic/easier to add more groups (could be the ones listed or "Ram" or whatever)?

Best regards, Klemme

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.