如何使用JavaScript实现点击第1页锚点后替换第2页的所有图片

问题根源 #

你当前的写法不生效核心原因是浏览器的每个页面都有独立的JS运行环境和DOM树：

• 你在第1页运行的JS只能操作第1页的DOM元素，第2页此时还没加载，document.querySelectorAll(".vertical-suba img") 根本获取不到第2页的元素，修改操作完全无效
• 跳转页面后第1页的JS运行环境会直接销毁，所有变量、修改都会丢失，不会传递到第2页

解决方法（URL参数传参实现，兼容性最好） #

第一步：修改第1页的JS逻辑 #

删除第1页中操作第2页DOM的代码，点击时只需要在跳转链接上携带参数标识你要切换的图片组即可：

let colImgRed = document.querySelectorAll(".collections-cont a");
let newProImg = ["images/collections/f.jpeg","images/collections/g.jpeg","images/collections/h.jpeg","images/collections/i.jpeg","images/collections/j.jpeg"];

colImgRed[0].onclick = function(){
  // 跳转时携带参数标识需要加载新图片组
  location.href = "html/product.html?useNewImg=1";
  return false; // 阻止a标签默认跳转行为
}

第二步：在第2页添加JS逻辑，读取参数替换图片 #

第2页加载完成后，先读取URL里的参数，判断是否需要替换图片：

// 第2页的JS代码，写在product.html里
window.onload = function(){
  // 读取URL参数
  const urlParams = new URLSearchParams(window.location.search);
  const useNewImg = urlParams.get('useNewImg');
  // 新图片路径要和第2页的路径规则统一，加../前缀
  const newProImg = ["../images/collections/f.jpeg","../images/collections/g.jpeg","../images/collections/h.jpeg","../images/collections/i.jpeg","../images/collections/j.jpeg"];
  const vertImg = document.querySelectorAll(".vertical-suba img");

  if(useNewImg === '1' && vertImg.length === newProImg.length){
    for(let i=0; i<vertImg.length; i++){
      vertImg[i].src = newProImg[i];
    }
  }
}

其他可选方案 #

如果不想在URL上显示参数，也可以用localStorage存储状态：

• 第1页点击时执行 localStorage.setItem('useNewImg', '1') 再跳转
• 第2页读取localStorage.getItem('useNewImg')判断后替换图片，替换完成后可以删掉存储的状态避免下次打开还生效

内容的提问来源于stack exchange，提问作者Gopichand