0

esta es mi primera pregunta y quería saber si pueden ayudarme. Estoy tratando de hacer un selector de componentes (como los que hay en las tiendas online de pc), quería saber cómo podría hacer si elijo un componente, la parte que dice "Seleccionar componente" cambie al nombre del componente elegido. Para que me entiendan mejor les dejo mi código y una imagen. No puedo agregar el CSS porque se me hace muy largo y no me deja publicar.

https://flic.kr/ps/3W99QY

JQUERY:

$(document).ready(function(){
$('.show-list').on('click', function(){
    $('.products').slideToggle('slow');

$('.products li').on('click', function(){
    $('.products').slideUp('fast');
    $('.products-container ul').show('.mothers');
        });
    });
});
HTML

<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">
                <a href="#" class="show-list">Seleccionar componentes</a>
                <ul class="products">
                <div class="opciones">
                    <li><a href="#" tipo="Placa madre"><img src="img/icons/motherboard.png" alt="">Placa madre</a></li>
                </div>
                <div class="opciones">
                    <li><a href="#" tipo="Procesador"><img src="img/icons/cpu.png" alt="">Procesador</a></li>
                </div>
                <div class="opciones">
                    <li><a href="#" tipo="Cooler"><img src="img/icons/fan.png" alt="">Cooler</a></li>
                </div>
                <div class="opciones">
                    <li><a href="#" tipo="RAM"><img src="img/icons/ram.png" alt="">Ram</a></li>
                </div>
                <div class="opciones">
                    <li><a href="#" tipo="HDD"><img src="img/icons/harddisk.png" alt="">Disco duro</a></li>
                </div>
                <div class="opciones">
                    <li><a href="#" tipo="Placa de video"><img src="img/icons/videocard.png" alt="">Placa de video</a></li>
                </div>
                <div class="opciones">
                    <li><a href="#" tipo="Fuente"><img src="img/icons/power.png" alt="">Fuente</a></li>
                </div>
                <div class="opciones">
                    <li><a href="#" tipo="Gabinete"><img src="img/icons/case.png" alt="">Gabinete</a></li>
                </div>
                </ul>
            </div>
        </div>
    </div>

    <!--Productos-->
    <div class="products-container">
        <ul>
            <li class="mothers"><a href="#"><img src="img/comps/mother/m1.jpg"></a></li>
            <p>Mother ASUS PRIME H310M-R R2.0 1151 OEM<br>
                Precio: $6,590.00</p>
            <li><a href="#"><img src="img/comps/mother/m2.jpg"></a></li>
            <p>Mother ASUS PRIME H310M-R R2.0 1151 OEM<br>
                Precio: $6,590.00</p>
            <li><a href="#"><img src="img/comps/mother/m3.jpg"></a></li>
            <p>Mother ASUS PRIME H310M-R R2.0 1151 OEM<br>
                Precio: $6,590.00</p>
            <li><a href="#"><img src="img/comps/mother/m4.jpg"></a></li>
            <p>Mother ASUS PRIME H310M-R R2.0 1151 OEM<br>
                Precio: $6,590.00</p>
            <li><a href="#"><img src="img/comps/mother/m5.jpg"></a></li>
            <p>Mother ASUS PRIME H310M-R R2.0 1151 OEM<br>
                Precio: $6,590.00</p>
            <li><a href="#"><img src="img/comps/mother/m6.jpg"></a></li>
            <p>Mother ASUS PRIME H310M-R R2.0 1151 OEM<br>
                Precio: $6,590.00</p>
        </ul>
    </div>
</body>
</html>

No pude subir bien la imagen porque estoy en el trabajo. La idea es que al seleccionar, por ejemplo "Placa madre", donde dice "Seleccionar componente" cambie a "Place madre" con su icono.

1 respuesta 1

0

primero que nada tienes que agregarle un id al label que quieres modificar para poder seleccionarlo:

<a href="#" id="labelChanged" class="show-list">Seleccionar componentes</a>

ahora crearemos una funcion que reciva por parametro un string y haga el cambio de texto:

function changeText(label)
{
    $("#labelChanged").text(label);
}

Por ultimo llama a la funcion cuando hagan click en cada elemento y pasale por parametro el nombre que deseas que aparezca, por ejemplo:

<div class="opciones" onclick="changeText('Placa madre')">
   <li><a href="#" tipo="Placa madre"><img src="img/icons/motherboard.png" alt="">Placa madre</a></li>
</div>

Espero te sirva esto, mucho exito.

1
  • Problema solucionado. Muchas gracias Thomas, era algo sencillo, pero la verdad que como recién empiezo nunca se me hubiese ocurrido jaja. Saludos! Commented el 15 mar. 2021 a las 11:46

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.