单击第一页的锚点时如何替换第二页中的图像？ 在 JavaScript

Question

我的网站上有 2 个两页。 第 1 页包含一些图像，第 2 页包含另外一些图像。 当我单击第 1 页中的特定图像时，我想更改第 2 页中的所有图像。我能够重定向到第 2 页但无法使更改生效。请帮助。

--第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>

- 第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";
}

         

Answer 1

显然，这种动态替换不能跨 static 页面工作。 您可以设置某种标志，检查该标志，如果已设置，则在页面加载时进行实际替换。 在第一页：

colImgRed[0].onclick = function() {
  localStorage.setItem('replace', true)
  location.href = 'html/product.html'
}

在第二个：

(function() {
  if (localStorage.getItem('replace')) {
    //assuming you have declared the vars as in the question
    for(i=0; i<vertImg.length; i++) {
      vertImg[i].src = newProImg[i]
    }
    localStorage.removeItem('replace')
  }
})

完全未经测试

Answer 2

好吧，我要做的是让每个锚点都有一个特定的片段（#），就像这样

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

然后在第 2 页的 javascript 中，检查片段并相应地更新图像

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;
}

我在这里所做的是在switch语句case "#a":中匹配片段：检查片段是否匹配“#a”，如果匹配，它将图像更改为新图像