HTML - No me filtra por categorias

 
Vista:

No me filtra por categorias

Publicado por fernanda (3 intervenciones) el 27/08/2018 03:02:05
Hola buenas noches, estoy haciendo una tienda oniline, y no me filtra por las categorias a pesar de que esta el js, inidicando todo para que lo haga, les adjunto el html, css y js, si alguien me puede aydar muchas gracias

el html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<link rel="stylesheet" type="text/css" href="default.css" />
    <link rel="stylesheet" type="text/css" href="component.css" />
    <script src="modernizr.custom.js"></script>
    <script src="C:\Users\fgtal\OneDrive\trabajo\damas\damas.js"></script>
        <script src="C:\Users\fgtal\OneDrive\trabajo\damas\jquery-3.2.1.js"></script>
</head>
<body>
    <div class="container demo-3">
        <header>
            <h1>Escoga un producto</h1>
            <div class="codrops-demos">
               <a href="#" class="category-item" category="all">Todo</a>
               <a href="#" class="category-item" category="blusas">Blusas</a>
               <a href="#" class="category-item" category="buzos">Buzos</a>
               <a href="#" class="category-item" category="camperas">Camperas</a>
               <a href="#" class="category-item" category="camisones">Camisones</a>
               <a href="#" class="category-item" category="pantalones">Pantalones</a>
               <a href="#" class="category-item" category="pijamas">Pijamas</a>
               <a href="#" class="category-item" category="calzas">Calzas</a>
               <a href="#" class="category-item" category="sacos">Sacos</a>
               <a href="#" class="category-item" category="musculosas">Musculosas</a>
            </div>
        </header>
        <ul class="grid cs-style-3">
            <li>
                <figure class="product-item" category="blusas">
                    <img src="C:\Users\fgtal\OneDrive\trabajo\damas\imagenes\25607.jpeg" alt="25607">
                    <figcaption>
                        <h3>25607</h3>
                        <span>Blusas dama con estampado</span>
                        <a href="#">Ver más</a>
                    </figcaption>
                </figure>
            </li>
            <li>
                <figure class="product-item" category="blusas">
                    <img src="C:\Users\fgtal\OneDrive\trabajo\damas\imagenes\26142.jpeg" alt="26142">
                    <figcaption>
                        <h3>26142</h3>
                        <span>Blusas dama con sublimado</span>
                        <a href="#">Ver más</a>
                    </figcaption>
                </figure>
            </li>

sigue pero es mas de lo mismo

el css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 100%; padding: 0; margin: 0;}
 
body {
	box-sizing: border-box;
	font-family: 'Lato', Calibri, Arial, sans-serif;
	color: #b3b9bf;
	background: #f9f9f9;
}
 
a {
	color: #888;
	text-decoration: none;
}
 
a:hover,
a:active {
	color: #333;
}
 
/* Header Style */
.container > header {
	width: 98%;
	margin: 0 auto;
	padding: 2em;
	text-align: center;
	background: rgba(0,0,0,0.01);
}
 
.container > header h1 {
	font-size: 2.625em;
	line-height: 1.3;
	margin: 0;
	font-weight: 300;
}
 
 
/* Demo Buttons Style */
.codrops-demos {
	padding-top: 1em;
	font-size: 0.9em;
	width: 15%;
}
 
.codrops-demos .category-item,
.codrops-demos .category-item:hover {
	margin: 0.5em;
	padding: 0.7em 1.1em;
	font-weight: 700;
	display: flex;
	flex-direction: column;
	text-align: center;
	margin: 15px 0px;
	flex-wrap: wrap;
	background: #f9f9f9;
 
}
.codrops-demos .category-item {
	border: 3px solid #b3b9bf;
	color: #b3b9bf;
}
 
.codrops-demos .category-item:hover {
	border: 3px solid #2c3f52;
	color: #2c3f52;
}
.codrops-demos .ct_item-active{
	background: #b3b9bf;
	color: black;
}
y el js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready(function(){
 
	// AGREGANDO CLASE ACTIVE AL PRIMER ENLACE ====================
	$('.codrops-demos .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);
	});
});

desde ya muchas gracias
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 626
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

No me filtra por categorias

Publicado por xve (1539 intervenciones) el 27/08/2018 09:21:46
Hola Fernanda, revisa la consola del navegador, seguramente veras errores, ya que las rutas que pones en los src de los script, son erroneas...
Ten en cuenta que desde el navegador, no tiene acceso a C:/..... tienes que poner rutas que se encuentren dentro de tu servidor web, donde el navegador tenga acceso.

Que errores te muestra en la consola del navegador?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

No me filtra por categorias

Publicado por fernanda (3 intervenciones) el 28/08/2018 02:28:23
Gracias por tomarte el tiempo de responder.

el error que me aparece es:

SCRIPT5009: '$' is not defined
damas.js (1,1)

utilizo los archivos en C, porque la pagina aun no esta subida estan solo los archivos en el disco C,
no tengo servidor,

gracias

De ahi vi el error el jquery estaba despues que el script, lo arregle no me da mas errores en la consola, pero no filtra
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve
Val: 626
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

No me filtra por categorias

Publicado por xve (1539 intervenciones) el 28/08/2018 11:10:46
Hola Fernanda, según el error que comentas, tu problema es que cargas primero tu librería y luego jquery, pero en tu librería utilizas jquery... por eso el error!!!!
Tienes que cargar primero la librería jquery y después la de damas.js.

Coméntanos si te funciona, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

No me filtra por categorias

Publicado por fernanda (3 intervenciones) el 29/08/2018 01:07:01
Si, los intercambie. Pero me sigue sin filtrar.
Aunque no me da errores en la consola.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar