Tengo 2 dos páginas en mi sitio web. La página 1 contiene pocas imágenes y la página 2 contiene otras pocas imágenes. Cuando hago clic en una imagen en particular en la página 1, quiero cambiar todas las imágenes en la página 2. Puedo redirigir a la página 2 pero no pude hacer que los cambios afecten. Por favor, ayuda.
--Página 1 --
<div class="container collections-cont"> <a href="#"><img src="images/collections/b.jpeg" /></a> <a href="#"><img src="images/collections/c.jpeg" /></a> <a href="#"><img src="images/collections/d.jpeg" /></a> <a href="#"><img src="images/collections/e.jpeg" /></a> </div>--Página 2 --
<div class="vertical-suba"> <img src="../images/collections/a.jpeg"> <img src="../images/collections/b.jpeg"> <img src="../images/collections/c.jpeg"> <img src="../images/collections/d.jpeg"> <img src="../images/collections/e.jpeg"> </div>-- JavaScript --
let colImgRed=document.querySelectorAll(".collections-cont a"); let vertImg=document.querySelectorAll(".vertical-suba img"); let newProImg=["images/collections/f.jpeg","images/collections/g.jpeg","images/collections/h.jpeg","images/collections/i.jpeg","images/collections/j.jpeg",] let i; colImgRed[0].onclick=function(){ for(i=0;i<vertImg.length;i++){ vertImg[i].src=newProImg[i]; } location.href="html/product.html"; }Bueno, lo que haría es hacer que cada ancla tenga un fragmento específico (#), como este
<div class="container collections-cont"> <a href="#b"><img src="images/collections/b.jpeg" /></a> <a href="#c"><img src="images/collections/c.jpeg" /></a> <a href="#d"><img src="images/collections/d.jpeg" /></a> <a href="#e"><img src="images/collections/e.jpeg" /></a> </div>Y luego en su javascript para la página 2, verifique el fragmento y actualice sus imágenes en consecuencia
let vertImg = document.querySelectorAll(".vertical-suba img"); let newProImg=["images/collections/f.jpeg","images/collections/g.jpeg","images/collections/h.jpeg","images/collections/i.jpeg","images/collections/j.jpeg",] switch (location.hash) { case "#a": for(let i=0;i<vertImg.length;i++){ vertImg[i].src=newProImg[i]; } break; } Lo que hice aquí fue hacer coincidir el fragmento en un caso de declaración de cambio case "#a": verifica si el fragmento coincide con "#a", y si es así, cambia las imágenes a las nuevas imágenes