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

Question

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

javascriptjquerylayer

3

我有一个问题，需要找到正确的函数或逻辑来解决向 div（透明 png）添加图层的问题。

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

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

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

如果我使用 append() - 就像你在代码中看到的那样被注释掉 - 它将无限添加 - 如何删除前一个选项（仅来自相同选项组）

1 - 这里要使用什么正确的函数？

2 - 如何制作“组”分割，而不必重新分为多个专用 div（我将有50-60 个选项..） - 或在另一种情况下，如何自动创建它们？

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

编辑 I

Lame 的词语解释：

我有一些“选项组”，所有选项组都与同一产品相关联。每个组“选项”对应于具有选项图像或相应部分的透明 png。

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

- Obmerk Kronen

3个回答

0

我曾在从MMO游戏网站拉取数据并生成头像图片时做过类似的事情。我使用了PHP和GD库来即时生成包括不同颜色变化的所有必要部分的图片，然后缓存生成的图片，以便对于相同配置的后续调用不需要重新生成。最终，头像的每种可能的配置都被缓存，图像生成脚本变得过时。

也许您可以使用相同的技术或者仅预先生成所有可能的图像，让Jquery基于所选选项进行选择？我能想到的另一种选择是使用Flash或HTML 5的画布元素。

- Pastor Bones

手动实现所有可能性几乎是不可能的。需要一个缓存系统，但在进行缓存之前，需要有东西可以被缓存 - 因此需要构建该系统。 - Obmerk Kronen

0

尝试运行你所注释的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+'"/>控制文本：</span>');

- rt2800

谢谢，这个可行 - 但在这种情况下，empty() 只会清除我的选项吗？因为目前为止 - 我仍然不能同时选择三个选项（例如领子、口袋和纽扣）。 - Obmerk Kronen

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Musa · Accepted Answer

也许您可以有一个展示永不改变内容的主要图像，然后为每个选项添加一个图像。这些图像可以在标记中或在首次选择选项时添加。
这是对fiddle的修改，我认为这就是你想要实现的：fiddle，我为每个选项添加了一个覆盖图像和span元素。
编辑：自动切换将是微不足道的，只需为显示和信息元素分配以其所影响元素结尾的id即可。
例如：

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

请查看此处的代码

如果您不想使用下拉框，我建议您使用单选按钮而不是复选框，因为它们可以很容易地进行分组。

请查看此处的代码