0

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!

4
  • Amigo, me maravillaría si te sale algo de esa manera, el código javascript o jquery va escrito al interno de los tag <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. Commented el 16 mar. 2021 a las 13:56
  • @ArielMontes Muchas gracias Ariel por la respuesta, pido perdón por los errores, trataré de que no vuelva a pasar. Ahora, el código que me brindaste veo que es el mismo que puse yo, porque no veo ningún cambio, puede ser que te olvidaste alguna parte? Commented el 16 mar. 2021 a las 16:23
  • No, no me muestra el section de los componentes que elijo. Commented el 16 mar. 2021 a las 16:33
  • Muchisimas gracias, Ariel! Funcionó perfectamente! Commented el 16 mar. 2021 a las 18:11

1 respuesta 1

0

Aquí te dejo un ejemplo de como escribir correctamente la página. Es importante respetar las sangrías, así como comentar correctamente las secciones sobre todo si son largas. Además de lo ya explicado en mi comentario de arriba.

Este código hace lo que buscas, agregué Bootstrap para añadir un poco de estilos a la página, ya que no proporcionaste los tuyos.


Importante: Cambié un poco el código jquery, ya que el tuyo no funcionaba. Eliminé el atributo tipo de los elementos, ahora para que funcione debes tener el mismo valor en evento onclick="ChangeText('Placa madre') y en <section class="Placa madre">, ya que utilizo la clase como condición.

<!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>Document</title>

    <!-- Agrego Bootstrap 5 porque no proporcionaste tu css -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

</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="#"  onclick="ChangeText('Placa madre')"><img src="img/icons/motherboard.png" alt="">Placa madre</a></li>
                    <li><a href="#" onclick="ChangeText('Procesador')"><img src="img/icons/cpu.png" alt="">Procesador</a></li>
                    <li><a href="#" onclick="ChangeText('Cooler')"><img src="img/icons/fan.png" alt="">Cooler</a></li>
                    <li><a href="#" onclick="ChangeText('RAM')"><img src="img/icons/ram.png" alt="">Ram</a></li>
                    <li><a href="#" onclick="ChangeText('HDD')"><img src="img/icons/harddisk.png" alt="">Disco duro</a></li>
                    <li><a href="#" onclick="ChangeText('Placa de video')"><img src="img/icons/videocard.png" alt="">Placa de video</a></li>
                    <li><a href="#" onclick="ChangeText('Fuente')"><img src="img/icons/power.png" alt="">Fuente</a></li>
                    <li><a href="#" onclick="ChangeText('Gabinete')"><img src="img/icons/case.png" alt="">Gabinete</a></li>
                </ul>
            </div><!--//products__items-->
        </div><!--//products__list-->

        <div class="components" id="components">
            <section class="Placa madre">
                <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><!--//motherboards-->

            <section class="Procesador">
                <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><!--//cpu-->

        </div><!--//components-->
    </div><!--//container-->

    <!-- Importa jquery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script>
        
        //OCULTA LOS ELEMENTOS AL CARGAR LA PAGINA
        $('#components').find('section').hide();

        $(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');
                })
                
            });
        });

        //MOSTRAR NOMBRE DE COMPONENTE EN SELECCION
        function ChangeText(label){
            $("#LabelChanged").text(label);
            
            //FILTRA LOS COMPONENTES
            var productos = $('#components').find('section');
            productos.hide();
            
            productos.each(function() {
                if ($(this).attr("class") == label) {
                    $(this).show()
                } else {
                    $(this).hide()
                }
              });
        };
    </script>
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.