Jquery：如何将图像分层？

在下面的代码中，我有一个构建衬衫的页面。当用户单击一个选项（“男/女”）时，“#衬衫”部分通过将PNG图像层叠在一起来显示构造的衬衫。例如，选择基础颜色“蓝色”将显示蓝色衬衫的图像。然后，选择“罗纹”的主体缝合将在蓝色衬衫顶部放置一个图像，添加罗纹细节。现在，我的问题是，每个新图像都会替换以前的图像。其他一切都可以正常工作（显示选项以响应以前选择的选项）

选择性别

男性

女性
拾取体

蓝色

黑色

白色
拾取体

蓝色

黑色

粉红色
车身缝合

普通的

肋骨
普通的

蓝色

红色
肋骨

黑色

绿色
$（文档）.ready（函数（）{
$（“div.desc”）.hide（）；
风险值数据={
“105”：{img:http://oceandrive.localhost/images/diy-images/105.png，标签：“颜色1”，价格：“100”}，
“120”：{img:http://oceandrive.localhost/images/diy-images/120.png，标签：“颜色2”，价格：“110”}，
“145”：{img:http://oceandrive.localhost/images/diy-images/145.png，标签：“颜色3”，价格：“120”}，
“107”：{img:http://oceandrive.localhost/images/diy-images/107.gif，标签：“颜色4”，价格：“130”}，
“211”：{img:http://oceandrive.localhost/images/diy-images/211.png，标签：“颜色5”，价格：“140”}，
“212”：{img:http://oceandrive.localhost/images/diy-images/212.png，标签：“颜色6”，价格：“150”}，
“324”：{img:http://oceandrive.localhost/images/diy-images/324.png，标签：“颜色7”，价格：“160”}，
“325”：{img:http://oceandrive.localhost/images/diy-images/325.png，标签：“颜色8”，价格：“170”}，
};
$（'input[name]'）。单击（函数（）{
var value=$（this）.val（）；//pics单选按钮的值
if（值=='male'| |值=='female'）{
$（“div.gender”）.hide（'slow'）；
$（“div.gender input:radio”）.removeAttr（'checked'）；
}
如果（值=='body_-stitching_-plain'| |值=='body_-stitching_-rib'）{
$（“div.body_缝合”）.hide（'slow'）；
$（“div.body_缝合输入：radio”）.removeAttr（'checked'）；
}
$（“#”+value）.show（'slow'）；//使用选中的单选按钮值对div进行寻址
如果（选中此项）{
//var值=$（this.val（）；
var值=$（this.data（'id'）；
如果（数据[值]！=未定义）
{
var html=''；
html=html+“”；
$（'#shirt'）.html（html）；
var html=''；
html=html+'-'+数据[值]。标签+'-'+数据[值]。价格+'NT
；
$（'#pricefield'）.html（html）；
}
}
});
});

而不是使用：

$('#shirt').html(html);
('#pricefield').html(html);

使用

.append（…）

方法

$('#shirt').append(html);
('#pricefield').append(html);

而不是使用：

$('#shirt').html(html);
('#pricefield').html(html);

使用

.append（…）

方法

$('#shirt').append(html);
('#pricefield').append(html);

---

首先，您需要决定图像的显示顺序。例如，从您的代码中，我可以说您有两个级别（如果需要，可以添加更多级别）：

基地

车身缝合

其次，将每个级别分配给z索引，并为每个级别创建

元素。这些

的样式应确保其位置是绝对的，如下所示：

<div id="baseImage" style="z-index:1; position: absolute;"></div>
<div id="stitchImage" style="z-index:2; position: absolute;"></div>
...

然后，当您需要替换图像时，只需使用您拥有的代码：

$("#stitchImage").html("<img src='" + src + "' />");

$（“#缝合图像”）.html（“”）；

---

请注意，您必须使用空白的placeholding图像，以便用户在尚未选择较高层时可以看到较低层。

首先，您需要确定图像的显示顺序。例如，从您的代码中，我可以说您有两个级别（如果需要，可以添加更多级别）：

基地

车身缝合

其次，将每个级别分配给z索引，并为每个级别创建

元素。这些

的样式应确保其位置是绝对的，如下所示：

<div id="baseImage" style="z-index:1; position: absolute;"></div>
<div id="stitchImage" style="z-index:2; position: absolute;"></div>
...

然后，当您需要替换图像时，只需使用您拥有的代码：

$("#stitchImage").html("<img src='" + src + "' />");

$（“#缝合图像”）.html（“”）；

---

请注意，您必须使用空白的placeholding图像，以便用户在尚未选择较高层时可以看到较低层。

您的要求不太清楚。当你说“相互追加”时，你是什么意思？我对你的代码进行了jsfiddle，看看我是否能理解你的意图：-我仍然不确定你想要实现什么？请详细说明它应该做什么以及在哪里。好的，那么在Jsfiddle中：例如，如果你选择了蓝色的身体颜色，它将显示衬衫的身体。稍后，如果选择“躯干缝合平面”，然后选择“蓝色”，则会替换原始躯干图像。然而，它应该加上它。这张照片都是PNG的，彼此完美贴合。pricefield div中显示的价格信息也是一样。现在它被替换了，但应该添加。您是说您希望将图片层叠在一起，以便可以在基本衬衫图像上添加不同颜色的细节图像吗？是的，没错，我的意思是相互叠加。你问的问题不太清楚。当你说“相互追加”时，你是什么意思？我对你的代码进行了jsfiddle，看看我是否能理解你的意图：-我仍然不确定你想要实现什么？请详细说明它应该做什么以及在哪里。好的，那么在Jsfiddle中：例如，如果你选择了蓝色的身体颜色，它将显示衬衫的身体。稍后，如果选择“躯干缝合平面”，然后选择“蓝色”，则会替换原始躯干图像。然而，它应该加上它。这张照片都是PNG的，彼此完美贴合。与pricefield部门编号中显示的价格信息相同