Category Filter

Asked

Viewed 344 times

-3

I’m trying to implement the following category filter on my site, but I’m not succeeding.updated code with the 2 filters.

  <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Conteudos</title>
<!-- CSS -->
<link rel="stylesheet" href="css/geral.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
<link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/filtros.css">
<link rel="stylesheet" href="css/slider.css">
</head>
<body>
<!--top-->
<header>
<div id="header">
<nav class="teste1">
<img alt="vermelho" src="img/top.png" class="top"/>

</nav>
<img alt="vermelho" src="img/top1.png" class="testando"/>
    <div id="cabecario">
        <div id="logotopo"><img id="logo" src="img/logo.png" alt="logo"/></div>
    <div id="menutopo">
        <ul>
            <li>Home</li>
            <li>Fale Conosco</li>
        </ul>
    </div>

    </div>
    </div>
    </header>
<!--topo-->

<!--corpo-->
<div id="corpo">

<tbody>
    <!--Area Total-->
    <div id="area">
    <!-- Filtro -->
        <nav id="filtro">
    <!--Barra de Pesquisa-->
        <div class="barrapesquisa">
            <input type="text" id="textFind" placeholder="Pesquisar..."/>
            <i class="fa fa-search" aria-hidden="true"></i>
        </div>
        <!-- Fim da Barra de pesquisa-->
        <ul>

                <p>Por Categorias</p>
                <li><div id="cordomenu"></div> &nbsp <a href="#" class="btn" data-cat="todos">Todos</a> </li>
                <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">Gestão</a> </li>
                <li> <div id="cordomenu3"></div> &nbsp <a href="#" class="btn" data-cat="neg">Negocios</a> </li>
                <p> Por Contéudo</p>
                <li><div id="cordomenu4"></div> &nbsp <a href="#" class="bt"
                data-cat="curso"> Cursos</a> </li>
                <li><div id="cordomenu5"></div> &nbsp <a href="#" class="bt"
                data-cat="video"> Videos</a> </li>
                <li><div id="cordomenu6"></div> &nbsp <a href="#" class="bt"
                data-cat="tutorial"> Tutoriais</a> </li>
            </ul><br/>

<!-- Inicio de Slides Banner's -->

<div class="slides-container">

    <div class="mySlides fade">
        <img src="img/slide01.jpg" alt="slide01">
    <div class="text">Curso 01</div>
    </div>
    <div class="mySlides fade">
            <img src="img/slide02.jpg" alt="slide01">
            <div class="text">Curso 02</div>
    </div>
    <div class="mySlides fade">
            <img src="img/slide03.jpg" alt="slide01">
            <div class="text">Curso 03</div>
    </div>
</div>  
<!-- Fim container -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
<div style="text-align:center">
    <span class="dot" onclick="currentSlide(1)"></span> 
    <span class="dot" onclick="currentSlide(2)"></span> 
    <span class="dot" onclick="currentSlide(3)"></span> 
</div>
</nav><!--Fim Filtro -->            

<!-- Container -->
<div id="container">
    <div id="cursos">

<section class="curso tec">
    <div class="curso">  
        <div class="gallery-item">  
            <img src="img/gestao.jpg" class="img">
            <div class="content-gallery">
            <h3>Curso Tecnologia</h3>
            <p>Cursos</p>
            </div>
        </div>  <!-- Class gallery -->  
            <p class="tecnologia"></p>
            <p class="videos"></p>
  </div>      
  <section>

  <section class="curso neg">
    <div class="curso">  
        <div class="gallery-item">  
            <img src="img/gestao.jpg" class="img">
            <div class="content-gallery">
            <h3>Curso Negocio</h3>
            <p>Tutorial</p>
            </div>
        </div>  <!-- Class gallery -->  
            <p class="tecnologia"></p>
            <p class="videos"></p>
  </div>      
  <section>

  <section class="curso gest">
    <div class="curso">  
        <div class="gallery-item">  
            <img src="img/gestao.jpg" class="img">
            <div class="content-gallery">
            <h3>Curso Gestão</h3>
            <p>Rafael</p>
            </div>
        </div>  <!-- Class gallery -->  
            <p class="tecnologia"></p>
            <p class="videos"></p>
  </div>      
  <section>

 </div><!--CURSO-->
 <!--  Função Filtro Click -->

</div><!--Fim Do container-->
</div><!--Fim Da Area-->

</tbody>

</div><!--Fim do Corpo -->

<!-- Função de filtro -->
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/cat.js"></script>  
<script type="text/javascript" src="js/filtros.js"></script>  
<script type="text/javascript" src="js/slide.js"></script> 
</body>

</html>

jquery(filter with input text)

$(function(){ 

    $("#textFind").keyup(function(){
      var texto = $(this).val();

      $(".curso").each(function(){
        var resultado = $(this).text().toUpperCase().indexOf(' '+texto.toUpperCase());

        if(resultado < 0) {
          $(this).fadeOut();
        }else {
          $(this).fadeIn();
        }
      }); 

    });

  });

Filter with click jquery

$('.btn').on('click', function(){
    var cat = $(this).attr('data-cat');
    alert(cat);
    if(cat == 'todos'){
        $('.curso section').show()
    }else{
        $('.curso section').each(function(){
            if(!$(this).hasClass(cat)){
                $(this).hide()
            }else{
                $(this).show()
            }
        })
    }
})
javascript jquery css

  • Which filter? What’s the problem?

  • show error so we can view

  • Rafael, I ask you to read this topic that teaches how to create a question, helps increase the chances of getting useful answers, alias Welcome to Stackoverflow BR! https://answall.com/help/how-to-ask

1 answer

1

Your problem is that there are some errors in the selectors you are using.

The first is that there is no element that meets the requirement below:

 $('.cursos div').show()

Above you are searching all divs who own a parent with class cursos. To meet this, it would have to be something similar to the code below:

console.log($('.cursos div').text())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cursos">
  <div>
    div
  </div>
  <p>
    p
  </p>
</div>

<div class="cursos">
  <section>
    <div>
      div
    </div>
  </section>
</div>

Your each has the same problem, so I will not go into more detail.

To solve your problem, just use the correct selectors. See your corrected example:

$('.btn').on('click', function() {
  var cat = $(this).attr('data-cat');
  alert(cat);
  if (cat == 'todos') {
    $('div.curso').show()
  } else {
    $('div.curso').each(function() {
      if (!$(this).hasClass(cat)) {
        $(this).hide()
      } else {
        $(this).show()
      }
    })
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <div id="cabecario">
    <div id="logotopo"><img id="logo" src="img/logo.png" alt="logo" /></div>
    <div id="menutopo">
      <ul>
        <li>Home</li>
        <li>Fale Conosco</li>
      </ul>
    </div>
  </div>
</header>
<!--topo-->
<!--corpo-->
<div id="corpo">

  <tbody>
    <!--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 -->
      <div id="filtro">
        <ul>
          <p>Por Categorias</p>
          <li>
            <div id="cordomenu1"></div> &nbsp <a href="#" class="btn" data-cat="todos">Todas</a>
          </li>
          <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">Gestão</a>
          </li>
          <li>
            <div id="cordomenu3"></div> &nbsp <a href="#" class="btn" data-cat="neg">Negocios</a>
          </li>
          <p> Por Contéudo</p>
          <li>
            <div id="cordomenu4"></div> &nbsp <a href="#" class="bt" data-cat="curso"> Cursos</a>
          </li>
          <li>
            <div id="cordomenu5"></div> &nbsp <a href="#" class="bt" data-cat="video"> Videos</a>
          </li>
          <li>
            <div id="cordomenu6"></div> &nbsp <a href="#" class="bt" data-cat="tutorial"> Tutoriais</a>
          </li>
        </ul>
      </div>
      <!--Fim Filtro -->

      <!-- Container -->
      <div id="container">
        <div id="cursos">

          <div class="curso tec">
            <h3>TECNOLOGIA</h3>
            <img alt="imagem curso" src="img/gestao.jpg" class="img" width="200px" height="156px" />
          </div>

          <div class="curso gest">
            <h3>GESTÃO</h3>
            <img alt="imagem curso" src="img/gestao.jpg" class="img" width="200px" height="156px" />
          </div>

          <div class="curso neg">
            <h3>NÉGOCIOS</h3>
            <img alt="imagem curso" src="img/gestao.jpg" class="img" width="200px" height="156px" />
          </div>

          <div class="curso tec">
            <h3>TÉCNOLOGIA</h3>
            <img alt="imagem curso" src="img/gestao.jpg" class="img" width="200px" height="156px" />
          </div>

        </div>
        <!--CURSO-->
      </div>
      <!--Fim Do container-->
    </div>
    <!--Fim Da Area-->
  </tbody>
</div>
<!--Fim do Corpo -->

  • Now I am as a question,manage to implement the 2 filters;the click per category and one that receives input typed by the user, however the 2 does not work together. Or one or the other. Probably because of the selectors ,where I am using <Section class="category"> and<div class="course">,as edited code, the case would have to implement these jquery validations.Help ai.

  • @Rafaelluz Create another question explaining better what you want and what you have already done. I will be happy to help you.

  • ,in the code above that develop,implemented of filter types,one that receives input via typed text and the other when click on the category menu,Contundo I’m having difficulty implementing that both work together. Check code at start.

Browser other questions tagged javascript jquery css

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