單擊第一頁的錨點時如何替換第二頁中的圖像？ 在 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”，如果匹配，它將圖像更改為新圖像