Question

（我提前道歉 - 现在已经很晚了，这可能不会那么清楚。而且，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/

这不是使用我正在使用的图像，所以它在小提琴上非常难看。但至少你可以看到我的意思（希望如此）！

Answer 1

最好的解决方案是使用隐藏类型的输入文件创建一个表单，然后使用JavaScript使用适当的值填充这些字段。然后，您可以序列化此表单并使用带有隐藏POST参数的ajax发送它，或使用序列化数据创建表单链接（比您将使用GET方法）。

以下是您查看的小提琴：jsfiddle

此外，将input类型的hidden类型从text更改为hidden，这样您就可以清楚地看到它们的内容，而不是在“生活”之前“，将它们改回<form id="avatar" action="save.php" method="GET"> <input type="hidden" name="head" value="3" />  <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>。

示例HTML：

$(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);
}

继续JS：

{{1}}

如何根据用户选择的选项更改链接href（onclick）

1 个答案: