JQuery。需要帮助思考如何构建与以前的动态字段相关的动态字段吗

此页面允许用户动态添加问题（此部分有效），用户可以在每个问题中添加一对多的答案，这些答案也是动态的。这是本页的线框，可能会有帮助：

正如我所说，问题部分已经完成，表单中的字段已经正确发布

我需要一些帮助来思考如何添加答案区域。这是到目前为止我的代码

<script>
currentQuestion = 1;

 function addQuestion(){
// Clone our question container and assign it a new ID
var newElement = $('#questionContainer0').clone().attr('id','questionContainer'+currentQuestion);
// Update the ID and Name of the textarea in our question container
newElement.children('#question0').attr('id','question'+currentQuestion).attr('name','question'+currentQuestion);
// Append our new question container to the bottom
newElement.appendTo('#questionArea');

currentQuestion++;
}

function addAnswer(){
//var newAnswer = $('#question0-answer1').clone().attr('id','question0-answer2').attr('name','question0-answer2');
//newAnswer.appendTo('#answerContainer0');
}
</script>
</head>

<form method="post" action="test.cfm">
<div id="questionArea">
<div id="questionContainer0" class="questionContainer">
    <textarea id="question0" name="question0"></textarea>
    <div id="answerContainer0">
    <input type="text" id="question0-answer1" name="question0-answer1" />
    <p><a href="#" onClick="addAnswer();" id="add">Add Answer</a></p>
</div>  
</div>

<input type="submit" value="go" name="submit">
</form>
<a href="#" onClick="addQuestion();" id="addQuestion" title="Add a question" class="link-sm" style="background-color:red;">Add Question</a>

当前问题=1；
函数addQuestion（）{
//克隆问题容器并为其分配一个新ID
var newElement=$（'#questionContainer0'）.clone（）.attr（'id'，'questionContainer'+currentQuestion）；
//更新问题容器中文本区域的ID和名称
newElement.children（“#question0”）.attr（'id'，'question'+currentQuestion）.attr（'name'，'question'+currentQuestion）；
//将新问题容器附加到底部
newElement.appendTo（“#questionArea”）；
当前问题++；
}
函数addAnswer（）{
//var newAnswer=$（'question0-answer1'）.clone（）.attr（'id'，'question0-answer2'）.attr（'name'，'question0-answer2'）；
//newAnswer.appendTo（“#answerContainer0”）；
}

FWIF，我是JQuery新手，如果我的做法完全错误，请让我知道：）-我相信有一种更巧妙的方法可以做到这一点，而无需编写addQuestion函数并用onClick调用它。

我会这样做： 首先，将addAnswer链接html更改为以下内容：

<a href="javascript:" class="add-answer">Add Answer</a>

我将删除

currentQuestion

global变量，并更改addquery函数：

function addQuestion(){
  var curentQuestion = $(".questionContainer").size(); //Number of questionContainers
  var $newElement = $('#questionContainer0').clone().attr('id','questionContainer'+currentQuestion);
  $newElement.children('#question0'). attr('id','question'+currentQuestion).attr('name','question'+currentQuestion);
  //Update the answerContainer div id.
  $newElement.children('#answerContainer0') .attr('id','answerContainer'+currentQuestion);
  //Update the first answer id and name
  var answerId = 'question'+currentQuestion+'-answer1';
  $newElement.children('#question0-answer1').attr('id',answerId).attr('name',answerId);
  $newElement.appendTo('#questionArea');
}

就这样。如果你有疑问，就问我。

---

希望这有帮助。干杯

除了你的问题之外，还有一点，但真的很不错！埃德加，非常感谢-你的改变真的很有洞察力。我有很多东西要学。这些问题仍然有效，但答案并非如此。单击链接时，我没有得到任何结果：（不客气。您是否收到javascript错误？请将代码上载到jsfiddle.net，以便我可以在那里更正它？我在代码中发现了一个eror。我正在编辑我的答案（写了

。

之后，而不是

。

之后插入。如果它仍然不起作用，请上传到jsfiddleSo awesome man，谢谢。我发现一件事不对。当我为第一个问题添加一些答案，然后单击添加新问题，新问题将以前一个问题的答案开始。不过，请病态工作，谢谢！不客气。Co请你把我的答案标记为正确（绿色支票）好吗？注：如果你在最后一个问题上需要帮助，请告诉我：）

function addQuestion(){
  var curentQuestion = $(".questionContainer").size(); //Number of questionContainers
  var $newElement = $('#questionContainer0').clone().attr('id','questionContainer'+currentQuestion);
  $newElement.children('#question0'). attr('id','question'+currentQuestion).attr('name','question'+currentQuestion);
  //Update the answerContainer div id.
  $newElement.children('#answerContainer0') .attr('id','answerContainer'+currentQuestion);
  //Update the first answer id and name
  var answerId = 'question'+currentQuestion+'-answer1';
  $newElement.children('#question0-answer1').attr('id',answerId).attr('name',answerId);
  $newElement.appendTo('#questionArea');
}