Categorias

by cintia_rodrigues

HTML

<div class="categoria">
		<a href="javascript:;" class="categoriaTodos selected">Todas as Categorias</a>
		<ul>
		    <li><a href="javascript:;">categoria 1</a></li>
		    <li><a href="javascript:;">categoria 2</a></li>
		    <li><a href="javascript:;">categoria 3</a></li>
		    <li><a href="javascript:;">categoria 4</a></li>
		    <li><a href="javascript:;">categoria 5</a></li>
		</ul>
	</div>
	<div class="subcategoria">
		<a href="javascript:;" class="categoriaTodos selected">Todas as subcategorias</a>
		<ul>
		    <li><a href="javascript:;">categoria 1</a></li>
		    <li><a href="javascript:;">categoria 2</a></li>
		    <li><a href="javascript:;">categoria 3</a></li>
		    <li><a href="javascript:;">categoria 4</a></li>
		    <li><a href="javascript:;">categoria 5</a></li>
		</ul>
	</div>
	<div class="resultados">
	    <article data-categoria="[1,2,3]" data-subcategoria="[5]">
	        produto 1<br/>
	        <img src="http://lorempixel.com/200/200/sports/1"/>
	        
	    </article>
	    <article data-categoria="[4]" data-subcategoria="[4]">
	        produto 2<br/>
	        <img src="http://lorempixel.com/200/200/sports/2"/>
	        
	    </article>
	    <article data-categoria="[2]" data-subcategoria="[3]">
	        produto 3<br/>
	        <img src="http://lorempixel.com/200/200/sports/3"/>
	        
	    </article>
	    <article data-categoria="[1,4]" data-subcategoria="[2,3,5]">
	        produto 4<br/>
	        <img src="http://lorempixel.com/200/200/sports/4"/>
	        
	    </article>
	   
	</div>

CSS

a
		{
		    text-decoration: none;
		    color: #334455;
		}
		a:hover, a.selected
		{
		    
		    color: #ff9900;
		}
		
		article
		{
		    width: 200px;
		    float: left;
		}

JavaScript

var categorias = new Array();
		var subcategorias = new Array();
		
		$(document).ready(function(){
		
			// CONFIGURA CLICK DAS CATEGORIAS E SUB
		    $('.categoria li a, .subcategoria li a').click(function(){
		      
		        $(this).toggleClass("selected");
		        defineCategoriasPrincipais()
				if($(this).parent().parent().find('li a.selected').length > 0)
			    {
			    	$(this).parent().parent().parent().find('.categoriaTodos').removeClass("selected");
			        
			    }
			   
				else
			    {
				     $(this).parent().parent().parent().find('.categoriaTodos').addClass("selected");
			    }
				defineCategoriasPrincipais();
				defineSubCategoriasPrincipais();
				aplicaFiltro();
		    })
		    // CONFIGURA CLICK DO BOTAO 'TODAS' AS CATEGORIAS e SUB
		    $('.categoria .categoriaTodos').click(function(){
		    	$(this).addClass('selected');
		    	categorias = new Array();
			    $(this).parent().find('li a').removeClass('selected');
			    aplicaFiltro();
		    })
		     $('.subcategoria .categoriaTodos').click(function(){
		    	$(this).addClass('selected');
		    	subcategorias = new Array();
			    $(this).parent().find('li a').removeClass('selected');
			    aplicaFiltro();
		    })
		})
	   
	     function defineCategoriasPrincipais()
	     {
	     	categorias = new Array();
		    $('.categoria li a.selected').each(function(){
			     categorias.push($(this).parent().index()+1)
		    })
	     }
		 function defineSubCategoriasPrincipais()
	     {
	     	subcategorias = new Array();
		    $('.subcategoria li a.selected').each(function(){
			     subcategorias.push($(this).parent().index()+1)
		    })
	     }
	    
	     function aplicaFiltro()
	     {
		     $('article').stop(true).fadeOut();
		     $('article').each(function(index){
		     	var categoriasAQuePertence = $(this).data('categoria');
		     	var subcategoriasAQuePertence = $(this).data('subcategoria');
		     	
		     	if(categorias.length > 0 || subcategorias.length > 0)
		    ...