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:
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.
<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