Quiero mostrar los detalles del producto en un sitio web de comercio electrónico. cuando hago clic en un producto, debe ir a la segunda página, que es la página de detalles, en la que quiero mostrar los detalles de ese producto en particular en el que hice clic. Debería funcionar para todos los productos en la primera página. Por favor, ayúdame.
--Página 1 Html--
<div class="cont"> <a href="page2.html" onclick="proGallery(this)"><img src="product-gallery/a.jpeg"></a> <a href="page2.html" onclick="proGallery(this)"><img src="product-gallery/f.jpeg"></a> </div>--Página2 Html--
<section> <div class="wrapper"> <div class="product-images"> <img> <img> <img> <img> <img> </div> <div class="result" ><img></div> </div> </section>JavaScript
function proGallery(x){ let imageSrc=x.getAttribute("src"); let pics=document.querySelectorAll(".product-images img"); if(imageSrc=="product-gallery/a.jpeg"){ open("page2.html"); pics[0].src="product-gallery/a.jpeg"; pics[1].src="product-gallery/b.jpeg"; pics[2].src="product-gallery/c.jpeg"; pics[3].src="product-gallery/d.jpeg"; pics[4].src="product-gallery/e.jpeg"; } if(imageSrc=="product-gallery/b.jpeg"){ open("page2.html"); pics[0].src="product-gallery/f.jpeg"; pics[1].src="product-gallery/g.jpeg"; pics[2].src="product-gallery/h.jpeg"; pics[3].src="product-gallery/i.jpeg"; pics[4].src="product-gallery/j.jpeg"; } }El problema aquí es que x dentro de su función se refiere al elemento de enlace en lugar de a img . Es por eso que x.getAttribute("src") intentará obtener el atributo src del enlace, no de la imagen. Yo escribiría así:
<div class="cont"> <a href="page2.html?product=1"><img src="product-gallery/a.jpeg"></a> <a href="page2.html?product=2"><img src="product-gallery/f.jpeg"></a> </div>Y en JS:
let product = location.search.split('=')[1]; if(product){ let pics=document.querySelectorAll(".product-images img"); if(product=="1"){ pics[0].src="product-gallery/a.jpeg"; pics[1].src="product-gallery/b.jpeg"; pics[2].src="product-gallery/c.jpeg"; pics[3].src="product-gallery/d.jpeg"; pics[4].src="product-gallery/e.jpeg"; }else if(product="2"){ pics[0].src="product-gallery/f.jpeg"; pics[1].src="product-gallery/g.jpeg"; pics[2].src="product-gallery/h.jpeg"; pics[3].src="product-gallery/i.jpeg"; pics[4].src="product-gallery/j.jpeg"; } }