Javascript Category Filter

Navigation
0

I'm having trouble implementing a category filter on my site, so when I click on a particular category, it's only visible.

I've even been able to create a search filter, based on input typed, but now I want to do that when I filter the user by clicking the Menu category.

Below is the Javascript that I used to implement the search with input , I was thinking of using it, but I would like to receive input when user clicks the category menu. 

$('.btn').on('click', function(){
    var cat = $(this).attr('data-cad')
    if(cat == 'todos'){
        $('.cursos div').show()
    }else{
        $('.cursos div').each(function(){
            if(!$(this).hasClass(cat)){
                $(this).hide()
            }else{
                $(this).show()
            }
        })
    }
})
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Conteudos</title>
	<meta name="viewport" content="width=device-width"> 
	<link rel="stylesheet" href="css/geral.css">
		<!-- Javascript -->
	<script type="text/javascript" src="javascript/jquery-3.2.1.min.js"></script> 
	<script type="text/javascript" src="javascript/filtros.js"></script> 
	<script type="text/javascript" src="javascript/filter-cat.js"></script> 
</head>
<body>
<div id="corpo">

	<!--Area Total-->
	<div id="area">
	<!--Barra de Pesquisa-->
		<div id="barrapesquisa">
		    <input type="text" id="txtEBusca" placeholder="Pesquisar..."/>
		    <i class="fa fa-search" aria-hidden="true"></i>
		</div>
		<!-- Fim da Barra de pesquisa-->
		<!-- Filtro -->
		<nav id="filtro">
			<ul>
				<p>Por Categorias</p>
				<li><div id="cordomenu1"></div> &nbsp <a href="#" clas="btn" data-cat="tec">Tecnologia</a> </li>
				<li><div id="cordomenu2"></div> &nbsp <a href="#" clas="btn" data-cat="gest">gestao</a> </li>
				<li> <div id="cordomenu3"></div> &nbsp <a href="#" clas="btn" data-cat="neg"  >Negocios</a> </li>
			</ul>
</nav><!--Fim Filtro -->
    <!-- Container -->
	<div id="container">
		<div id="curso">
            <div class="curso">      <!-- Curso-->
			<div class="tec">           <!--Categoria-->
            	<div class="gallery-item">
				    <div class="content-gallery">
					    <h3>teste</h3>
					    <h4>Tendências e desafios no mundo corporativo</h4>
					    <div class="gestao"></div>
					    <div class="videos"></div>
                    </div>
			</div> 		<!--Fim do Classe categoria-->      
		</div> <!--Fim do Classe Curso-->
    </div><!--Fim do Curso-->

	<div id="curso">
            <div class="curso">      <!-- Curso-->
			<div class="neg">           <!--Categoria-->
            	<div class="gallery-item">
				    <div class="content-gallery">
					    <h3>teste</h3>
					    <h4>Tendências e desafios no mundo corporativo</h4>
					    <div class="gestao"></div>
					    <div class="videos"></div>
                    </div>
			</div> 		<!--Fim do Classe categoria-->      
		</div> <!--Fim do Classe Curso-->
    </div><!--Fim do Curso-->

	<div id="curso">
            <div class="curso">      <!-- Curso-->
			<div class="gest">           <!--Categoria-->
            	<div class="gallery-item">
				    <div class="content-gallery">
					    <h3>teste</h3>
					    <h4>Tendências e desafios no mundo corporativo</h4>
					    <div class="gestao"></div>
					    <div class="videos"></div>
                    </div>
			</div> 		<!--Fim do Classe categoria-->      
		</div> <!--Fim do Classe Curso-->
    </div><!--Fim do Curso-->
							   
		</div><!--Fim Do container-->	
    </div><!--Fim Da Area-->
</div><!--Fim do Corpo -->
</body>
</html>
    
asked by anonymous 26.09.2017 / 17:00

1 answer

1

This is much simpler and has several ways to do it, a simple way and that's how it is ... 

$('.btn').on('click', function(){
  var categoria = $(this).attr('data-categoria')
  
  $('.items li').each(function(){
    if(!$(this).hasClass(categoria)){
      $(this).hide()
    }else{
      $(this).show()
    }
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><buttonclass="btn" data-categoria="comida">Comida</button>
<button class="btn" data-categoria="bebida">Bebida</button>

<ul class="items">
  <li class="comida">Arroz</li>
  <li class="comida">Feijao</li>
  <li class="comida">Lasanha</li>
  <li class="bebida">Coca Cola</li>
</ul>

EDIT 1: 

$('.btn').on('click', function(){
    var cat = $(this).attr('data-cad')
    if(cat == 'todos'){
        $('.cursos div').show()
    }else{
        $('.cursos div').each(function(){
            if(!$(this).hasClass(cat)){
                $(this).hide()
            }else{
                $(this).show()
            }
        })
    }
})
a{
padding: 20px;
color: blue;
text-decoration: none;
}

a:hover{
color: red;
}


.cursos{
margin-top: 50px;
}

.cursos .curso{
padding: 5px;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
</head>
<body>
    <a href="#" class="btn" data-cad="todos">Todos</a>
    <a href="#" class="btn" data-cad="front">Front-End</a>
    <a href="#" class="btn" data-cad="back">Back-End</a>
    
    <div class="cursos">
        <div class="curso front">Javascript</div>    
        <div class="curso front">HTML</div>
        <div class="curso front">CSS</div>
        <div class="curso back">NodeJS</div>
        <div class="curso back">MongoDB</div>
    </div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script></body></html>

EDIT2:

ThistimeIdidbasedonyourcode,followtheexample,justtest.

$('.btn').on('click', function(){
    
    var cat = $(this).attr('data-cat')
    alert(cat)
    if(cat == 'todos'){
        $('.cursos div').show()
    }else{
        $('#container .curso .tag').each(function(){
            if(!$(this).hasClass(cat)){
                $(this).hide()
            }else{
                $(this).show()
            }
        })
    }
})
<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Conteudos</title>
      <meta name="viewport" content="width=device-width">
      <link rel="stylesheet" href="css/geral.css">
       
   </head>
   <body>
      <div id="corpo">
      <!--Area Total-->
      <div id="area">
      <!--Barra de Pesquisa-->
      <div id="barrapesquisa">
         <input type="text" id="txtEBusca" placeholder="Pesquisar..."/>
         <i class="fa fa-search" aria-hidden="true"></i>
      </div>
      <!-- Fim da Barra de pesquisa-->
      <!-- Filtro -->
      <nav id="filtro">
         <ul>
            <p>Por Categorias</p>
            <li>
               <div id="cordomenu1"></div>
               &nbsp <a href="#" class="btn" data-cat="tec">Tecnologia</a> 
            </li>
            <li>
               <div id="cordomenu2"></div>
               &nbsp <a href="#" class="btn" data-cat="gest">gestao</a> 
            </li>
            <li>
               <div id="cordomenu3"></div>
               &nbsp <a href="#" class="btn" data-cat="neg"  >Negocios</a> 
            </li>
         </ul>
      </nav>
      <!--Fim Filtro -->
      <!-- Container -->
      <div id="container">
      <div id="curso">
         <div class="curso">
            <!-- Curso-->
            <div class="tag tec">
               <!--Categoria-->
               <div class="gallery-item">
                  <div class="content-gallery">
                     <h3>teste</h3>
                     <h4>Tendências e desafios no mundo corporativo</h4>
                     <div class="gestao"></div>
                     <div class="videos"></div>
                  </div>
               </div>
               <!--Fim do Classe categoria-->      
            </div>
            <!--Fim do Classe Curso-->
         </div>
         <!--Fim do Curso-->
         <div id="curso">
            <div class="curso">
               <!-- Curso-->
               <div class="tag neg">
                  <!--Categoria-->
                  <div class="gallery-item">
                     <div class="content-gallery">
                        <h3>teste</h3>
                        <h4>Tendências e desafios no mundo corporativo</h4>
                        <div class="gestao"></div>
                        <div class="videos"></div>
                     </div>
                  </div>
                  <!--Fim do Classe categoria-->      
               </div>
               <!--Fim do Classe Curso-->
            </div>
            <!--Fim do Curso-->
            <div id="curso">
               <div class="curso">
                  <!-- Curso-->
                  <div class="tag gest">
                     <!--Categoria-->
                     <div class="gallery-item">
                        <div class="content-gallery">
                           <h3>teste</h3>
                           <h4>Tendências e desafios no mundo corporativo</h4>
                           <div class="gestao"></div>
                           <div class="videos"></div>
                        </div>
                     </div>
                     <!--Fim do Classe categoria-->      
                  </div>
                  <!--Fim do Classe Curso-->
               </div>
               <!--Fim do Curso-->
            </div>
            <!--Fim Do container-->	
         </div>
         <!--Fim Da Area-->
      </div>
      <!--Fim do Corpo -->
          
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
     

   </body>
</html>
    
26.09.2017 / 17:12
How to list the last message of all conversations TBODY content overwriting THEAD and TFOOT