我在找到正确的函数或逻辑来解决向 div 添加图层的问题（透明 png）时遇到问题。
这是潜在产品的“配置器”的一部分。
半工作演示（衬衫示例）可以在这里找到：
http://jsfiddle.net/obmerk99/9t4f4/16/
如果我将使用 append() - 就像您可以在代码中看到它被注释掉一样 - 它会无休止地追加 - 我如何删除前一个选项（仅来自同一选项组）
1-在这里使用的正确功能是什么？
2 - 如何在不使用多个专用 div 的情况下进行“组”划分（我将有 50-60 个选项..） - 或者在另一种情况下，如何自动创建这些？
3 - 如何使它适用于收音机/复选框？
编辑我
跛脚的话解释：
我有“组”选项，都指同一个产品。每个组“选项”对应于带有选项图像或相应部分的透明 png。
例如，如果我配置一辆车，我将有一组带有不同车轮图像的“车轮”选项，一组带有不同窗户的“窗户”选项，一组“颜色”选项等等......在最后，它们堆叠起来，形成完整的图像配置。这有点像那些制作头像或卡通图像的网站，人们可以在其中选择头部、胡须、背景、眼镜、头发等。
也许您可以有一个主图像来显示永远不会改变的内容，除此之外，每个选项都有一个图像，图像可以在标记中或在第一次选择选项时添加。
这是小提琴的一个模组，我认为这是你想要实现的小提琴我为每个选项添加了一个叠加图像和跨度。
编辑：自动化开关将是微不足道的，只需给出以影响它的元素结尾的显示和信息元素 id
例如
<select id="optionX"> <img id="img-optionX"> <span id="desc-optionX">
见小提琴
我认为您应该使用单选按钮（如果您不想使用选择）而不是复选框，因为它们可以轻松分组。
见小提琴
我之前必须这样做，同时使用从 MMO 游戏网站提取的数据生成头像图像。我使用 PHP 和 GD 库动态生成包含所有必要部分（包括不同颜色变化）的图像，然后缓存生成的图像，以便不必重新生成对相同配置的后续调用。最终，化身的所有可能配置都被缓存，图像生成脚本变得过时了。
也许您可以使用相同的技术，或者只是预先生成每个可能的图像，让 Jquery 根据选定的选项进行选择？我能想到的唯一其他选择是使用 Flash 或 HTML 5 的 canvas 元素。
尝试以下代码以获取您评论的 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>');