Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje18-11-2019, 02:11 (UTC)    
Título del mensaje: Ayuda con Filtrador de elementos
Responder citando
No funciona mi filtrador de elementos en mi página, los elementos no se filtran y no sé cuál es el error
Acá el código HTML
Código:
 <!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <title>Filtrando elementos por categorias</title>

   <link rel="stylesheet" href="css/estilos.css">
   <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet">

   <script src="js/jquery-3.2.1.js"></script>
   <script src="js/script.js"></script>
</head>
<body>
   
   <div class="wrap">
      <h1>Escoge un producto</h1>
      <div class="store-wrapper">
         <div class="category_list">
            <a href="#" class="category_item" category="all">Todo</a>
            <a href="#" class="category_item" category="ordenadores">Ordenadores</a>
            <a href="#" class="category_item" category="laptops">Laptops</a>
            <a href="#" class="category_item" category="smartphones">Smartphones</a>
            <a href="#" class="category_item" category="monitores">Monitores</a>
            <a href="#" class="category_item" category="audifonos">Audifonos</a>
         </div>
         <section class="products-list">
            <div class="product-item" category="laptops">
               <img src="images/laptop_hp.jpg" alt="" >
               <a href="#">Laptop Hp</a>
            </div>
            <div class="product-item" category="laptops">
               <img src="images/laptop_toshiba.jpg" alt="" >
               <a href="#">Laptop Toshiba</a>
            </div>
            <div class="product-item" category="smartphones">
               <img src="images/samsung_galaxy.jpg" alt="" >
               <a href="#">Samsung Galaxy</a>
            </div>
            <div class="product-item" category="smartphones">
               <img src="images/iphone.jpg" alt="" >
               <a href="#">Iphone 7</a>
            </div>
            <div class="product-item" category="ordenadores">
               <img src="images/pc_hp.jpg" alt="" >
               <a href="#">PC Hp</a>
            </div>
            <div class="product-item" category="ordenadores">
               <img src="images/pc_lenovo.jpg" alt="" >
               <a href="#">PC Lenovo</a>
            </div>
            <div class="product-item" category="monitores">
               <img src="images/monitor_asus.jpg" alt="" >
               <a href="#">Monitor Asus</a>
            </div>
            <div class="product-item" category="audifonos">
               <img src="images/jbl.jpg" alt="" >
               <a href="#">Audifonos JBL</a>
            </div>
         </section>
      </div>
   </div>

</body>
</html>


Acá el código jquery:
Código:
$(document).ready(function(){

   // AGREGANDO CLASE ACTIVE AL PRIMER ENLACE ====================
   $('.category_list .category_item[category="all"]').addClass('ct_item-active');

   // FILTRANDO PRODUCTOS  ============================================

   $('.category_item').click(function(){
      var catProduct = $(this).attr('category');
      console.log(catProduct);

      // AGREGANDO CLASE ACTIVE AL ENLACE SELECCIONADO
      $('.category_item').removeClass('ct_item-active');
      $(this).addClass('ct_item-active');

      // OCULTANDO PRODUCTOS =========================
      $('.product-item').css('transform', 'scale(0)');
      function hideProduct(){
         $('.product-item').hide();
      } setTimeout(hideProduct,400);

      // MOSTRANDO PRODUCTOS =========================
      function showProduct(){
         $('.product-item[category="'+catProduct+'"]').show();
         $('.product-item[category="'+catProduct+'"]').css('transform', 'scale(1)');
      } setTimeout(showProduct,400);
   });

   // MOSTRANDO TODOS LOS PRODUCTOS =======================

   $('.category_item[category="all"]').click(function(){
      function showAll(){
         $('.product-item').show();
         $('.product-item').css('transform', 'scale(1)');
      } setTimeout(showAll,400);
   });
});
↑
Mostrar mensajes anteriores:   
  • Página 1 de 1

  •  
    • Saltar a:  


Powered by phpBB © 2001, 2005 phpBB Group

© 2024 webme GmbH, Alemania. Todos los derechos reservados.