（我提前道歉——已经晚了，这可能没有那么清楚。另外，JavaScript根本不是我的强项！
我已经在我的网站上构建了一个部分，将多个 png 文件相互叠加（使用div），以便我的用户可以为其个人资料构建自定义头像。一切看起来都运行良好，但现在我正在尝试如何保存他们选择的选项（我不是在寻求有关保存其图像的帮助，而是寻求有关保存所选变量的帮助）。
例如：用户可能会选择头部 3、身体 17、眼睛 5、鼻子 2 等。我想将它们选择的值存储在 MySQL 表中。我了解如何存储值，但我坚持在驱动 PHP 的链接中设置它们的值。
"保存"其创建的表单操作应反映其所选选项，并随着用户更改它们而更改（如果他们改变主意）。如何更改每个变量以反映其选择？
该操作可能如下所示：
action="save.php?head=3&body=17&eyes=5&nose=2"
让我们假设用户现在改变了主意，想用头82。当他们选择该选项时，操作应反映该更改：
action="save.php?head=82&body=17&eyes=5&nose=2"
以下是到目前为止我拥有的驱动图像分层的代码示例：
<a onclick="changeOuterwear(this)" id="15.outerwear/outerwear.09"><div style="background:url('../avatars/15.outerwear/thumb.outerwear.09.png') no-repeat center center;"></div></a>
<div class="avatar-12"><img id="outerwear" class="icon" border="0" /></div>
function changeOuterwear(thisDiv){
document.getElementById('outerwear').src = "../avatars/"+thisDiv.id+".png"
}
为了帮助澄清一些事情（并希望显示我在语言表达方面遇到的问题），我整理了一个快速的jsfiddle以供参考：http://jsfiddle.net/sheldond/mvf28rjp/2/
这不是使用我正在使用的图像，所以它在小提琴上非常丑陋。但至少你能明白我的意思（希望如此）！
最好的解决方案是创建一个表单，隐藏输入文件，然后使用 JavaScript 用专有值填充这些字段。此外，您可以对此表单进行序列化，并使用带有隐藏 POST 参数的 ajax 发送它，或者使用序列化数据创建指向表单的链接（而不是使用 GET 方法）。
这是小提琴供您查看： jsfiddle
此外，出于开发目的，将这些input类型从hidden更改为text，这样您就可以清楚地看到它们中发生了什么，而不是在"上线"之前将它们更改回hidden。
她的一个示例 HTML：
<form id="avatar" action="save.php" method="GET">
<input type="hidden" name="head" value="3" /> <!-- You can echo your PHP variable into the values here -->
<input type="hidden" name="body" value="17" />
<input type="hidden" name="eyes" value="5" />
<input type="hidden" name="nose" value="2" />
</form>
<button id="change-head">Change Head</button>
这是JS：
$(document).ready(function(){
serializeForm();
$('#change-head').click(function(){
$('input[name="head"]').val(82);
serializeForm();
});
});
function serializeForm() {
var serializedOutput = $('form#avatar').serialize();
$('#output').text($('form#avatar').serialize(serializedOutput));
// you can also automatically update your form url
$('form#avatar').attr('action', 'save.php?' + serializedOutput);
}