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");
    });

感谢。

Answer 2

我找到了一个带解决方案的codepen：

var img = jQuery("#image01").children("img").clone(); jQuery("#thumb01").append(img);

这就是我想要的。唯一的问题是我每个图像/缩略图添加一个这样的功能（最多可以达到15个）...如果有通过课堂或阵列的方式或者我喜欢听的东西它，否则我可以忍受这个。

另一个div中图像的动态缩略图

2 个答案: