estuve viendo otras preguntas y vi varios códigos sobre cómo filtrar productos en una web con JQuery, pero en mi caso no logro hacerlo. Estuve cambiando los nombres de las etiquetas pero no me sale. Quiero hacer que cuando haga clic en un componente de la lista de "Seleccionar componentes", aparezca abajo según el componente seleccionado. ¿Cuál podría ser mi problema? Si existen otras formas de hacerlo sería muy bueno también.
Les copio los códigos:
$(document).ready(function(){
//MOSTRAR LISTA DE CATEGORIAS
$('.show-list').on('click', function(){
$('.products').slideToggle('slow');
//CERRAR LISTA DE CATEGORIAS HACIA ARRIBA CUANDO SE HAGA CLICK
$('.products li').on('click', function(){
$('.products').slideUp('fast');
})
//FILTRAR COMPONENTES
$('#products_items').find('a').on('click', function(e){
e.preventDefault();
var productos = $('#components').find('section');
$(productos).hide();
var type = $(this).data('tipo');
if(type == ''){
$(productos).hide();
}else{
$('#products_items').find('li.'+type).show();
}
});
});
});
//MOSTRAR NOMBRE DE COMPONENTE EN SELECCION
function ChangeText(label){
$("#LabelChanged").text(label);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arma tu PC</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=DotGothic16&display=swap" rel="stylesheet">
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="container">
<h1>Armá tu PC</h1>
<div class="products__list">
<div class="products_items" id="products_items">
<a href="#" id="LabelChanged" class="show-list">Seleccionar componentes</a>
<ul class="products">
<li><a href="#" tipo="Placa madre" onclick="ChangeText('Placa madre')"><img src="img/icons/motherboard.png" alt="">Placa madre</a></li>
<li><a href="#" tipo="Procesador" onclick="ChangeText('Procesador')"><img src="img/icons/cpu.png" alt="">Procesador</a></li>
<li><a href="#" tipo="Cooler" onclick="ChangeText('Cooler')"><img src="img/icons/fan.png" alt="">Cooler</a></li>
<li><a href="#" tipo="RAM" onclick="ChangeText('RAM')"><img src="img/icons/ram.png" alt="">Ram</a></li>
<li><a href="#" tipo="HDD" onclick="ChangeText('HDD')"><img src="img/icons/harddisk.png" alt="">Disco duro</a></li>
<li><a href="#" tipo="Placa de video" onclick="ChangeText('Placa de video')"><img src="img/icons/videocard.png" alt="">Placa de video</a></li>
<li><a href="#" tipo="Fuente" onclick="ChangeText('Fuente')"><img src="img/icons/power.png" alt="">Fuente</a></li>
<li><a href="#" tipo="Gabinete" onclick="ChangeText('Gabinete')"><img src="img/icons/case.png" alt="">Gabinete</a></li>
</ul>
</div>
</div>
<div class="components" id="components">
<section class="motherboards">
<div>
<a href="#" tipo="Placa madre"><img src="img/comps/mother/m1.png" alt="Mother 1"></a>
<p>Mother ASUS PRIME H310M-R R2.0 1151 OEM<br> Combo: 16,590.00</p>
</div>
<div>
<a href="#" tipo="Placa madre"><img src="img/comps/mother/m2.png" alt="Mother 2"></a>
<p>Mother Gigabyte H310M-H LGA 1151 8va gen<br>Precio Combo: $6,750.00</p>
</div>
<div>
<a href="#" tipo="Placa madre"><img src="img/comps/mother/m3.png" alt="Mother 3"></a>
<p>Mother ASUS PRIME H310M-E R2.0 HDVMI VGA M.2<br>Precio Combo: $6,910.00</p>
</div>
<div>
<a href="#" tipo="Placa madre"><img src="img/comps/mother/m4.png" alt="Mother 4"></a>
<p>Mother Gigabyte H310M M.2 REV 2.0 1151 9th Gen<br>Precio Combo: $7,110.00</p>
</div>
<div>
<a href="#" tipo="Placa madre"><img src="img/comps/mother/m5.png" alt="Mother 5"></a>
<p>Mother Asrock H310CM-HDV Socket 1151 8va Gen<br>Precio Combo: $7,437.00</p>
</div>
<div>
<a href="#" tipo="Placa madre"><img src="img/comps/mother/m6.png" alt="Mother 6"></a>
<p>Mother Gigabyte H310M-DS2 LGA 1151 8va gen<br>Precio Combo: $7,560.00</p>
</div>
</section>
<section class="cpu">
<div>
<a href="#"><img src="img/comps/cpu/c1.png" alt="CPU 1"></a>
<p>Mother ASUS PRIME H310M-R R2.0 1151 OEM<br> Combo: 16,590.00</p>
</div>
<div>
<a href="#"><img src="img/comps/cpu/c2.png" alt="CPU 2"></a>
<p>Mother Gigabyte H310M-H LGA 1151 8va gen<br>Precio Combo: $6,750.00</p>
</div>
<div>
<a href="#"><img src="img/comps/cpu/c3.png" alt="CPU 3"></a>
<p>Mother ASUS PRIME H310M-E R2.0 HDVMI VGA M.2<br>Precio Combo: $6,910.00</p>
</div>
<div>
<a href="#"><img src="img/comps/cpu/c4.png" alt="CPU 4"></a>
<p>Mother Gigabyte H310M M.2 REV 2.0 1151 9th Gen<br>Precio Combo: $7,110.00</p>
</div>
<div>
<a href="#"><img src="img/comps/cpu/c5.png" alt="CPU 5"></a>
<p>Mother Asrock H310CM-HDV Socket 1151 8va Gen<br>Precio Combo: $7,437.00</p>
</div>
<div>
<a href="#"><img src="img/comps/cpu/c6.png" alt="CPU 6"></a>
<p>Mother Gigabyte H310M-DS2 LGA 1151 8va gen<br>Precio Combo: $7,560.00</p>
</div>
</section>
</div>
</div>
</body>
</html>
Espero que me haya explicado bien, sino vuelvo a editar. Desde ya muchas gracias a todos!
<script>
...</script>
y obviamente debajo del tag script con el que importas jquery. Además el lugar donde poner ambos es dentro del<body>
, generalmente justo antes de cerrar la etiqueta body para que carguen todos los elementos de la página con los que quieres interactuar antes de intentar trabajar con ellos usando javascript.