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