Javascript Category Filter

Asked

Viewed 4,563 times

0

I’m having difficulty implementing a category filter on my site, which when clicking on a certain category, only it is visible.

I’ve even managed to create a search filter, based on input typed, but now I want to do when filter as per user click on Menu category.

Goes below Javascript I used to implement research with input, I was thinking of using the same, but receiving the input when user click on 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>

javascript jquery html5

  • Guy could not understand his text very well, example: now want to do when filter as user click on Menu category, could rewrite it for us?

1 answer

1

This is much simpler and has various ways of doing, a simple way and so on...

$('.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>


<button class="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>

EDIT 2:

This time I did it based on your code, follow the example, just test.

$('.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>

  • As I am nnoob still in HTML and Javascript, I tried to implement as suggested without success.In case would have a way to implement declaring inside a DIV and using href.

  • Yes, let me give you an example...

  • @Rafaelluz I edited the answer, I left the two forms.

  • I edited my first code at your suggestion, but I was unsuccessful,.

  • @Rafaelluz I’ll do it based on your own code

  • @Rafaelluz I edited my answer, with the correction of your code.

  • thanks for the moral, however I tried to implement as suggested, without success. I will study more on the theme and other ways to implement this filter.As I deal with legacy code that I am maintaining, I will see in this many elements (DIV’s) that I find where this X of the issue.

Show 2 more comments

Browser other questions tagged javascript jquery html5

You are not signed in. Login or sign up in order to post.