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