从一页获取图像以显示在以下一页上

Question

我正在尝试使用 JQuery 从图形标签中获取图像以显示在下一页上。这是我尝试使用的 JQuery 代码：

(() => {
    $("a").click(function(){
        this.prev().appendTo('#product');
    })
});

这是图形标签：

<figure id="tennis_set">
    <img class="shop_image" src="images/shop2.jpg" >
    <a href="seemore.html"><figcaption id="tennis_set_no_shoes">See more</figcaption></a></figure>

这是下一页上我想要的 div：

<div id="product_description_checkout">
                <h2 class="payment_title">Order Summary</h2>
                <div id="product"></div>
            </div>

到目前为止，它不起作用。我将不得不使用 Ajax 或 PHP 来存储数据吗？还是我只是为 JQuery 使用了错误的代码？

Answer 1

也许是这样的。将图像源作为变量设置到本地存储中。然后在下一页检查它。如果存在，则使用本地存储中的 src 创建一个图像元素。

$(document).ready(function() {
  $("a").click(function(e) {
    e.preventDefault();
    let src = $(this).closest('figure').find('img').attr('src');
    console.log('src', src);
    localStorage.setItem("useImage", src);
    // now that we got it stored, allow the link to go through
    window.location.href=$(this).attr('href');
  })
});

// on next page

$(document).ready(function() {
  if (!localStorage.getItem("useImage")) return;
  let img = $('<img />', {
    src: localStorage.getItem("useImage"),
  });
  img.appendTo($('#product'));
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<figure id="tennis_set">
  <img class="shop_image" src="images/shop2.jpg">
  <a href="seemore.html">
    <figcaption id="tennis_set_no_shoes">See more</figcaption>
  </a>
</figure>