Jquery在div上添加和删除多个图像层

Question

我无法找到正确的函数或逻辑来解决此问题，以便将图层添加到 div（透明 png）。

这是潜在产品“配置器”的一部分。

半工作演示（衬衫示例）可以在这里找到：

http://jsfiddle.net/obmerk99/9t4f4/16/

如果我将使用 append() - 就像你可以看到它在代码中被注释掉 - 它将无休止地追加 - 我如何删除前一个选项（仅来自同一选项组）

1 - 在这里使用的正确功能是什么？

2 - 我如何在不使用多个专用 div 的情况下进行“组”划分（我将有 50-60 个选项..） - 或者在另一种情况下，如何自动创建这些？

3 - 如何使其适用于单选框/复选框？？

编辑我

跛脚的话解释：

我有“组”选项，都指同一个产品。 每个组“选项”对应于带有选项图像或相应部分的透明 png。

例如，如果我配置一辆车，我将有一组带有不同车轮图像的“车轮”选项，一组带有不同窗户的“窗户”选项，一组“颜色”选项等等。 .. 最后，它们叠加起来，形成完整的映像配置。 这有点像那些制作头像或卡通图像的网站，人们可以在其中选择头部、胡须、背景、眼镜、头发等。

Answer 1

也许您可以有一个主图像来显示永远不变的内容，除此之外，每个选项都有一个图像，图像可以在标记中或在第一次选择选项时添加。

这是小提琴的一个模组，我认为这是您想要实现的目标fiddle我为每个选项添加了叠加图像和跨度。

编辑： 自动切换将是微不足道的，只需提供以影响它的元素结尾的显示和信息元素 id
例如。

<select id="optionX"> <img id="img-optionX"> <span id="desc-optionX">

见fiddle

我认为您应该使用单选按钮（如果您不想使用选择）而不是复选框，因为它们可以轻松分组。

见fiddle

Answer 2

我以前在使用从 MMO 游戏网站提取的数据生成头像图像时必须这样做。我使用 PHP 和 GD 库动态生成包含所有必要部分（包括不同颜色变化）的图像，然后缓存生成的图像，以便不必重新生成对相同配置的后续调用。最终，化身的所有可能配置都被缓存，图像生成脚本变得过时了。

也许您可以使用相同的技术，或者只是预先生成所有可能的图像，让 Jquery 根据选定的选项进行选择？我能想到的唯一其他选择是使用 Flash 或 HTML 5 的 canvas 元素。

Answer 3

请尝试以下代码来获取您注释的 JS 代码

$('#prod').empty().append('<img id="prod-image" style="z-index:1;" src="http://img8.uploadhouse.com/fileuploads/16068/1606810537372e83db57b46d5a2d44d3124ac999.png"/>').append('<span id="collar"><img style="z-index:2;" src="'+data[value].img+'"/>Control Text : </span>');