Category Filter [closed]

Question

Category Filter [closed]

Navigation

#1 by (1 votes)

-3

I'm trying to implement the following category filter on my site, but I'm not succeeding. Code updated 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 jquery click

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

asked by anonymous 27.09.2017 / 22:43

1 answer

Is it possible to create a popup and inside it a textbox to type something? Insert array into database [closed]

score 1 · Answer 1

Your problem is that you have 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 looking for all divs that have parent with class cursos . To meet this, it would have to be something similar with the code below:

console.log($('.cursos div').text())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="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. Here's 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><divid="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 -->