javascript - 来自另一个 div 中图像的动态缩略图

Question

是否可以从另一个 div 中的图像克隆缩略图图像？

我有一堆这样的 div:

<div id="itemXX" class"product">

  <div class="image">
    <figure>
      <img src="imageXX.jpg">
      <figcaption>editable</figcaption>
    </figure>
  </div>

  <div class="description">
    <p>editable</p>
  </div>

</div>

单击缩略图(在列表项内)时它们会被交换，缩略图也必须指向“imageXX.jpg”……我希望缩略图在更改 .product div img 时自动更新。

依赖于 jQuery。

编辑:用 PHP 可以做到这一点吗？

Answer 1

是的，您可以在 jQuery 中使用 clone() 和 appendTo 函数。

您的 HTML 是:

<div id="itemXX" class"product">

  <div class="image">
    <figure>
      <img src="imageXX.jpg">
      <figcaption>editable</figcaption>
    </figure>
  </div>

  <div class="description">
    <p>editable</p>
  </div>

</div>

添加这个 jQuery 这会将 div 类图像中的任何内容克隆到带有类描述的 div。随意操作代码并从中获得乐趣。

$(".description").click(function(){
    $(".image").clone().appendTo(".description");
    });

谢谢。