我是 JQuery 的新手，需要为我正在制作的网站提供决策树。我使用自定义灯箱功能加载初始“测验”，然后根据“测验”的答案，在同一窗口中加载某个联系表单。这一切都好，表格工作正常。问题是我需要记录“测验”的答案。我已经设法让 JQuery 将答案保存在变量中，但我无法将联系表单上隐藏输入的值更改为变量的值。
为了节省发布所有代码，测验通常是一堆问题，如下面的问题，设置为在用户单击答案时显示下一个问题。我通过 CSS 隐藏了实际输入，因此标签看起来像按钮：
<div id="q1" class="question">
<h3 class="lightBlueText">Did you purchase your home privately or through the council's 'Right to Buy' scheme?</h3 class="lightBlueText">
<div id="a1" class="answer">
<div class="quizButton"><input type="radio" name="q1" id="private" value="Private" /> <label for="private" class="lblPrivate" id="category-private">Private</label></div>
<div class="quizButton"><input type="radio" name="q1" id="rtb" value="Right To Buy" /><label for="rtb" class="lblrtb" id="category-righttobuy">Right To Buy</label></div>
</div><!--answer1-->
</div><!--question1-->
<div id="q2a" class="question">
<h3 class="lightBlueText">Did you take out your mortgage within the last 7 years?</h3 class="lightBlueText">
<div id="a2a" class="answer">
<div class="quizButton"><input type="radio" name="q2a" id="p1" value="Yes" /><label for="p1" class="lblYes" id="q1-private-yes">Yes</label></div>
<div class="quizButton"><input type="radio" name="q2a" id="p2" value="No" /><label for="p2" class="gotoSorry" id="q1-private-no">No</label></div>
<div class="quizButton"><input type="radio" name="q2a" id="p3" value="Don't Know" /><label for="p3" class="lblYes" id="q1-private-dontknow">Don't Know</label></div>
</div><!--answer2-->
</div><!--question2-->
<!--more questions here-->
<div id="q5a" class="question">
<h3 class="lightBlueText">Did you use your mortgage/remortgage to consolidate your debts?</h3 class="lightBlueText">
<div id="a5a" class="answer">
<div class="quizButton"><input type="button" name="q5a" value="Yes" id="p10" /><label for="p10" class="gotoForm1" id="q4-private-yes">Yes</label></div>
<div class="quizButton"><input type="button" name="q5a" value="No" id="p11"/><label for="p11" class="gotoSorry" id="q4-private-no">No</label></div>
<div class="quizButton"><input type="button" name="q5a" value="Don't Know" id="p12" /><label for="p12" class="gotoForm2" id="q4-private-dontknow">Don't Know</label></div>
</div><!--answer5-->
</div><!--question5-->
Jquery（原谅我的新手代码）：
var id;
var root = location.protocol + '//' + location.host + '/test/sapphire';
var quiz_answers;
$(document).ready(function() {
$('.question').hide();//hide all
$('#q1').show();//show the first question
quiz_answers = "Answers: "; //reset quiz answers
$('.quizButton label').click(function()
{
//get the id of what was just clicked.
//This is the value of the radio button that we need to select
var id = $(this).attr('id');
//as long as clickable text is in a tag that
//has a class of ‘quizButton’ and an id with the value of the
//radio button that it needs to select, we only need this statement.
$('input[value=" + id + "]').attr("checked", true);
if ($(this).is('.lblrtb')){ //this is to jump to the Right to Buy section and bypass the Private section
$('.question:visible:first').fadeOut(function(){
$('#q2b').fadeIn(); });
}
else { //else it will carry on through the Private section
$('.question:visible:first').fadeOut(function(){
$(this).next('.question:hidden').fadeIn('slow');
});
}
quiz_answers = quiz_answers + " " + id; //add the id of clicked label onto the variable
});
$('.gotoForm1').click(function(){
change_form();
$('#msm-form_wrapper').load(root+'/msm_form1.php');//open the contact form
$('input[name="answers"]').val(quiz_answers);
});
$('.gotoForm2').click(function(){
change_form();
$("#msm-form_wrapper").load(root+'/msm_form2.php');//open the contact form
$('input[name="answers"]').val(quiz_answers);
});
$('.gotoSorry').click(function(){
change_form();
$("#msm-form_wrapper").load(root+'/sorry.php');//open the contact form
$('input[name="answers"]').val(quiz_answers);
});
function change_form() {
$('#quiz_wrapper').hide();
$('#msm-form_wrapper').show();
};
$('.close, .backdrop').click(function(){
quiz_answers = "Answers: "; //reset quiz_answers if the user closes the contact form before submitting
});
最后是加载文件中包含的内容的示例：
<form id="msm_form1" method="POST" action="/test/sapphire/contact-form-handler.php" class="msm_form">
<h1>Sorry...</h1>
<p class="sorry">It's unlikely that we can help you this time, however if you would like someone to call you back please fill in the form below.</p>
<fieldset class="plain sorry">
<ul>
<li><label for='firstname'>First Name:</label><input type="text" name="firstname" id="input-firstname"></li>
<li><label for='lastname'>Last Name:</label><input type="text" name="lastname"></li>
<li><label for='contact'>Contact Number:</label><input type="text" name="contact"></li>
<li><label for='email'>Email:</label><input type="text" name="email"></li>
<li><label for='comments' class="comments">Comments:</label><textarea name="comments"></textarea></li>
<input type="hidden" name="page" value="Sorry Form" />
<input type="hidden" name="answers" value="" />
<li class="submit-label">Send your message<button type="submit" class="msm-form-submit"></button></li>
</ul>
</fieldset>
</form>
我可以使用 alert('quiz_answers'); 在任何阶段并获得正确的结果，它只是不会将该结果放入表单中。
我尝试了各种方法，例如在名为“answers”的输入中添加一个 ID，然后使用 $('#answers').val(quiz_answers);
但这也没有用。在测试中，我无法将任何内容添加到任何表单输入中，我认为这可能是由于我将额外内容加载到 div 中的方式。更改该方法如果有人有任何建议，我将不胜感激。
谢谢。