1

Estoy haciendo una página con HTML5, CSS3 y Javascript de una tienda en línea. La cosa es que usé un video de youtube para hacer las tarjetas de los productos, los cuales son los siguientes:

introducir la descripción de la imagen aquí

Se puede observar que en estos hay un conjunto de imágenes en los cuales al presionar se van cambiando. El problema surge aquí mismo, ya que el del tutorial usa el siguiente código en la imagen principal (la cual va cambiando cuando se presiona alguna de las de abajo):

HTML

<div class="container">

        <div class="card">

            <div class="content-1">

                <span class="arrow-left">

                    <i class="fas fa-arrow-left"></i>

                </span>

                <span class="like">

                    <i class="fas fa-heart" aria-hidden="true"></i>

                </span>

                
                <div class="main-image">

                    <img class="principal" src="images/remote.png" id="remote1"alt="">

                </div>

            </div>

            <div class="content-2">

                <div class="sub-image">

                    <a><img onclick="change(this)" src="images/remote.png" alt=""></a>
                    <a><img onclick="change(this)" src="images/remote1.png" alt=""></a>
                    <a><img onclick="change(this)" src="images/remote2.png" alt=""></a>
                    <a><img onclick="change(this)" src="images/remote3.png" alt=""></a>

                </div>

            </div>

            <div class="content-3">

                <div class="branding">

                    <span>Dualshock 4</span>
                    <h4>Playstation</h4>

                </div>

                <div class="ratings">
                
                <span><i class="fas fa-star"></i></span>
                <span><i class="fas fa-star"></i></span>
                <span><i class="fas fa-star"></i></span>
                <span><i class="fas fa-star"></i></span>
                <span><i class="fas fa-star"></i></span>
                </div>

                <div class="paragraph">

                    <p>Lorem ipsum dolor sit amet consectetur cusamus reprehenderit, quidem eius! Repellendus voluptatibus neque eos.
                    <span>Leer Mas</span>    
                    </p>
                </div>

                    <div class="price">

                            <span>$</span>
                            <span>55</span>

                            <div class="space"></div>

                            <a href="">Agregar al carrito</a>

                    </div>
            </div>

        </div>

    </div>

Javascript

var container = document.getElementById("remote1");

function change(image){

    container.src = image.src;

}

Se puede observar cómo usa el ID para cambiar las imágenes cuando se presionan.

Todo va bien cuando hay una card, pero cuando agrego otra las únicas imágenes que cambian son de la primera tarjeta definida. Entiendo que esto es debido a que es un ID, pero he tratado de solucionarlo definiéndolo como clase pero no lo logré.

Lo que intenté fue que cuando se seleccionara la tarjeta se le agregara la clase active a la imagen principal de la tarjeta mostrada en ese momento, para después en JS simplemente seleccionar el único elemento con active; pero no logré realizarlo ya que me marca un error.

3
  • No pongas elementos con dos atributos de clase porque solo será válido el primero de ellos. Me refiero aquí: <img class="principal" src="images/remote.png" class="remote1" alt=""> En todo caso los juntas así: <img class="principal remote1" src="images/remote.png" alt="">. Vuelve a editar la pregunta arreglando eso, gracias
    – masterguru
    el 15 oct. 2022 a las 0:18
  • Veo el div de mi respuesta en tu código: grupoImagenes... Si dices que molesta quítalo de la pregunta para ver realmente como es tu código original, sino la posible respuesta que te demos volverá a tener problemas supongo.
    – masterguru
    el 15 oct. 2022 a las 0:23
  • Perdon, eso era lo del ID. Lo coloque asi sin darme cuenta cuando estaba probando codigo. Ahorita lo corrijo :D el 15 oct. 2022 a las 0:25

1 respuesta 1

0

He cambiado el id="remote1" sustituyéndolo por una clase con el mismo nombre, que junto con la clase principal deja el atributo de este modo: class="principal remote1", porque los id en HTML deben ser únicos siempre.

Luego puedes usar el método closest() para buscar el ancestro más cercano con la clase sub-images, y una vez localizado, subir dos elementos en el orden jerárquico con la propiedad parentElement, lo que nos situa dentro en el div con la clase card y desde allí buscamos la primera ocurrencia de la clase remote1 con el método querySelector().

Es decir, el javascript quedaría así:

function change(el){
    el.closest(".sub-image").parentElement.parentElement.querySelector('.remote1').src = el.src;
}

Aquí un ejemplo completo:

function change(el){
    el.closest(".sub-image").parentElement.parentElement.querySelector('.remote1').src = el.src;
}
<div class="container">
  <div class="card">
    <div class="content-1">
      <span class="arrow-left">
        <i class="fas fa-arrow-left"></i>
      </span>
      <span class="like">
        <i class="fas fa-heart" aria-hidden="true"></i>
      </span>
      <div class="main-image">
<img width="200px;" src="https://cdn.pixabay.com/photo/2022/10/07/07/13/alps-7504344__340.jpg" class="principal remote1" alt="">
      </div>
    </div>
    <div class="content-2">
      <div class="sub-image">
      <a><img width="100px" onclick="change(this)" src="https://cdn.pixabay.com/photo/2022/10/08/18/44/foal-7507646__340.jpg" alt=""></a>
      <a><img width="100px" onclick="change(this)" src="https://cdn.pixabay.com/photo/2022/10/03/02/22/seagull-7494831__340.jpg" alt=""></a>
      <a><img width="100px" onclick="change(this)" src="https://cdn.pixabay.com/photo/2022/10/08/18/13/dog-7507541__340.jpg" alt=""></a>
      <a><img width="100px" onclick="change(this)" src="https://cdn.pixabay.com/photo/2022/10/07/09/24/little-panda-7504633__340.jpg" alt=""></a>
       </div>
    </div>
    <div class="content-3">
      <div class="branding">
        <span>Dualshock 4</span>
        <h4>Playstation</h4>
      </div>
      <div class="ratings">
        <span><i class="fas fa-star"></i></span>
        <span><i class="fas fa-star"></i></span>
        <span><i class="fas fa-star"></i></span>
        <span><i class="fas fa-star"></i></span>
        <span><i class="fas fa-star"></i></span>
      </div>
      <div class="paragraph">
        <p>Lorem ipsum dolor sit amet consectetur cusamus reprehenderit, quidem eius! Repellendus voluptatibus neque eos.
          <span>Leer Mas</span>
        </p>
      </div>
      <div class="price">
        <span>$</span>
        <span>55</span>
        <div class="space"></div>
        <a href="">Agregar al carrito</a>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="content-1">
      <span class="arrow-left">
        <i class="fas fa-arrow-left"></i>
      </span>
      <span class="like">
        <i class="fas fa-heart" aria-hidden="true"></i>
      </span>
      <div class="main-image">
<img width="200px;" src="https://cdn.pixabay.com/photo/2022/10/07/07/13/alps-7504344__340.jpg" class="principal remote1" alt="">
      </div>
    </div>
    <div class="content-2">
      <div class="sub-image">
       <a><img width="100px" onclick="change(this)" src="https://cdn.pixabay.com/photo/2022/10/08/18/44/foal-7507646__340.jpg" alt=""></a>
      <a><img width="100px" onclick="change(this)" src="https://cdn.pixabay.com/photo/2022/10/03/02/22/seagull-7494831__340.jpg" alt=""></a>
      <a><img width="100px" onclick="change(this)" src="https://cdn.pixabay.com/photo/2022/10/08/18/13/dog-7507541__340.jpg" alt=""></a>
      <a><img width="100px" onclick="change(this)" src="https://cdn.pixabay.com/photo/2022/10/07/09/24/little-panda-7504633__340.jpg" alt=""></a>
      </div>
    </div>
    <div class="content-3">
      <div class="branding">
        <span>Dualshock 4</span>
        <h4>Playstation</h4>
      </div>
      <div class="ratings">
        <span><i class="fas fa-star"></i></span>
        <span><i class="fas fa-star"></i></span>
        <span><i class="fas fa-star"></i></span>
        <span><i class="fas fa-star"></i></span>
        <span><i class="fas fa-star"></i></span>
      </div>
      <div class="paragraph">
        <p>Lorem ipsum dolor sit amet consectetur cusamus reprehenderit, quidem eius! Repellendus voluptatibus neque eos.
          <span>Leer Mas</span>
        </p>
      </div>
      <div class="price">
        <span>$</span>
        <span>55</span>
        <div class="space"></div>
        <a href="">Agregar al carrito</a>
      </div>
    </div>
  </div>
</div>

6
  • Gracias por responder. Hay un problema (el cual es mi culpa por no mostrar el codigo completo) el cual es que estos dos se encuentran en diferentes div's, lo puedes observar porque sub-image esta dentro de un content-2, mientras que main esta dentro de un content-1, por lo que agregar este div hace que toda la estructura de la tarjeta se descomponga el 15 oct. 2022 a las 0:05
  • Pon todo el código necesario para reproducir el problema pues, lo siento pero no podemos ir adivinando tu estructura completa si no la muestras. Creí que ese </div> mal abierto que hay entre main-image y content-2 era un error de tipeo sin importancia. Si lo pones bien y completo (ambos casos) será más facil darte una respuesta certera.
    – masterguru
    el 15 oct. 2022 a las 0:13
  • Perdón, por eso dije que fue mi culpa. Ya coloque todo el código de la estructura de la tarjeta: gracias por tomarte el tiempo de ayudarme el 15 oct. 2022 a las 0:16
  • Ya he actualizado mi respuesta, comprueba si ahora si funciona o no, gracias (la gracia de todo esto es saber moverse por el arbol jerárquico de elementos HTML con los distintos métodos y propiedades de que dispone javascript, como ves)
    – masterguru
    el 15 oct. 2022 a las 0:42
  • Parece funcionar a la perfección. Realmente te lo agradezco mucho. Una preguntita mas, podrias ser un poco mas especifico en las funciones que usaste? Es que me gustaria aprender o, por el contrario, alguna web o video donde pueda investigar estos conceptos? el 15 oct. 2022 a las 0:58

Tu Respuesta

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

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