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

Question

我有一个问题是找到正确的函数或逻辑来解决这个问题，以便将图层添加到div（transperant png）。

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

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

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

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

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

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

3 - 如何使其适用于收音机/复选框？

编辑我

Lame的字解释：

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

敌人的例子，如果我配置一辆汽车，我将有一组“轮子”选项与不同轮子的图像，一组“窗口”选项与不同的窗口，一组“颜色”选项等...等最后，他们叠加并制作完整的图像 - 配置。 它有点像制作头像的网站，或卡通图像，人们可以选择头，muctache，背景，glassess，头发等。

Answer 1

也许你可以有一个显示永不改变的主图像，最重要的是每个选项都有一个图像，图像可以在标记中，也可以在首次选择选项时添加。

这是一个小提琴的模型，我认为它是你想要实现的小提琴，我为每个选项添加了叠加图像和跨度。

编辑：自动切换将是微不足道的，只需给出影响它的元素中的显示和信息元素id
例如

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

看小提琴

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

看小提琴

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>');