如何使用JQuery将当前页面figure标签的图片传递到下一页面展示

算力阿峰

2026-9-23

问题原因

你当前的问题分三部分：

jQuery代码本身存在多处语法和逻辑错误：

定义的立即执行函数末尾缺少调用的()，代码从始至终不会运行
混淆了原生DOM对象和jQuery对象，点击事件回调里的this是原生a标签DOM对象，没有jQuery的prev()方法，需要用$(this)转为jQuery对象才能调用对应API
没有阻止a标签的默认跳转行为，点击后浏览器会立刻跳转，你的DOM操作逻辑还没执行就已经离开当前页面

核心逻辑错误：jQuery只能操作当前已加载页面的DOM元素，你想要插入的#product容器属于跳转后的新页面，当前页面不存在这个元素，所有操作都不会生效，且页面跳转后前一页的JS运行上下文会完全销毁，无法直接跨页操作DOM。

修复方案

不需要一开始就用Ajax或者PHP，简单的跨页传值用浏览器自带的localStorage就可以实现：

原页面JS代码修改

// 页面DOM加载完成后执行
$(function() {
  $("a").click(function(e) {
    // 阻止a标签默认跳转行为
    e.preventDefault();
    // 获取当前点击区域对应的图片地址
    const productImgSrc = $(this).prev('img.shop_image').attr('src');
    // 将图片地址存入本地存储
    localStorage.setItem('selected_product_img', productImgSrc);
    // 手动跳转到目标页面
    window.location.href = $(this).attr('href');
  });
});

目标页（seemore.html）添加JS代码

$(function() {
  // 读取本地存储的选中商品图片地址
  const selectedImg = localStorage.getItem('selected_product_img');
  if (selectedImg) {
    // 生成图片标签插入到指定容器
    $('#product').html(`<img class="shop_image" src="${selectedImg}">`);
    // 若不需要保留选择记录，插入完成后可清除存储
    // localStorage.removeItem('selected_product_img');
  }
});