Agersementene
New Member
The function below allows users to filter products by \[code\]data-attributes\[/code\], and accommodates filtering by multiple values simultaneously. It does this by creating an array of the values selected, and when any of the values are clicked (in this case checked/unchecked) it hides all the items and then re-shows those that match the values in the updated array. I'd like to modify the function to do the same thing with several \[code\]data-attributes\[/code\] simultaneously (with separate \[code\]click\[/code\] functions), but I'm having some trouble getting the syntax correct. I've posted a fiddle with a working example of the function here: http://jsfiddle.net/WZpMh/36/ and posted the code I used when trying to combine it with a 2nd \[code\]data-attribute\[/code\] here: http://jsfiddle.net/WZpMh/37/\[code\]$(document).ready(function () { var selected = []; $('#attributes-Colors *').click(function () { var attrColor = $(this).data('color'); var $this = $(this); if ($this.parent().hasClass("active")) { $this.parent().removeClass("active"); selected.splice(selected.indexOf(attrColor),1); } else { $this.parent().addClass("active"); selected.push(attrColor); } if (attrColor == 'All') { $('#content').find('*').show(); } else { $("#content").find("*").hide(); $.each(selected, function(index,item) { $('#content').find('[data-color ~="' + item + '"]').show(); }); } });}); \[/code\]