能否从另一div的图片克隆缩略图？含产品div结构及切换需求

当然可以实现这个需求！下面是具体的代码实现和步骤说明：

1. 调整HTML结构 #

首先我们需要一个容器来存放生成的缩略图，在现有HTML结构外添加这个容器：

<!-- 缩略图容器 -->
<div id="thumbnail-list"></div>

<!-- 你的现有产品容器 -->
<div id="item01" class="product">
  <div class="image">
    <figure>
      <img src="image01.jpg">
      <figcaption>可编辑</figcaption>
    </figure>
  </div>
  <div class="description">
    <p>可编辑</p>
  </div>
</div>
<div id="item02" class="product">
  <div class="image">
    <figure>
      <img src="image02.jpg">
      <figcaption>可编辑</figcaption>
    </figure>
  </div>
  <div class="description">
    <p>可编辑</p>
  </div>
</div>

2. 添加基础CSS样式 #

为了让缩略图和产品切换效果更直观，添加一些基础样式：

/* 默认隐藏所有产品容器，除了第一个 */
.product {
  display: none;
}
.product:first-child {
  display: block;
}

/* 缩略图容器样式 */
#thumbnail-list {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

/* 缩略图样式 */
.thumbnail {
  width: 80px;
  height: auto;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s;
}

/* 高亮当前选中的缩略图 */
.thumbnail.active {
  border-color: #007bff;
}

3. 编写JavaScript逻辑 #

用原生JavaScript实现克隆缩略图和切换功能：

// 获取所有产品容器和缩略图容器
const products = document.querySelectorAll('.product');
const thumbnailContainer = document.getElementById('thumbnail-list');

// 遍历每个产品，生成对应的缩略图
products.forEach((product, index) => {
  // 找到产品里的目标图片元素
  const productImg = product.querySelector('.image img');
  // 克隆图片元素（true表示深克隆，保留所有原生属性）
  const thumbnail = productImg.cloneNode(true);
  // 给缩略图添加类名，方便样式控制
  thumbnail.classList.add('thumbnail');
  
  // 给第一个缩略图默认添加激活状态
  if (index === 0) {
    thumbnail.classList.add('active');
  }
  
  // 绑定点击事件：切换对应产品显示
  thumbnail.addEventListener('click', () => {
    // 隐藏所有产品容器
    products.forEach(p => p.style.display = 'none');
    // 显示当前点击缩略图对应的产品
    product.style.display = 'block';
    
    // 更新所有缩略图的激活状态
    document.querySelectorAll('.thumbnail').forEach(t => t.classList.remove('active'));
    thumbnail.classList.add('active');
  });
  
  // 将生成的缩略图添加到容器中
  thumbnailContainer.appendChild(thumbnail);
});

关键细节说明 #

• 克隆图片时使用cloneNode(true)，会完整复制原图片的所有属性（包括src），所以缩略图自然指向对应的imageXX.jpg，无需额外手动设置。
• 点击缩略图时，通过遍历控制产品容器的显示/隐藏，同时更新缩略图的高亮状态，让用户清晰看到当前选中的内容。
• 所有样式和尺寸都可以根据你的实际需求自由调整，比如缩略图大小、高亮颜色、布局方式等。

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