0

我正在开发这个表单（测试）创建器，其中使用 jQuery 克隆包含表单元素的 div 以创建更多问题。原来的 div 是隐藏的。每个 div 也有一个已onClick="javascript:$(this).parent().empty().remove();"附加的按钮。我的问题是 div 编号为 question1、question 2 等，方法是检查该类存在多少个 div，question然后将该编号附加到“question”并将 question1（或 question2、question3 等）设置为克隆 div 的 id-因为原始 div 是隐藏的，不需要对该类的 div 数量 +1。但是，如果 div 被删除，编号就会变得混乱。示例：
1. 添加了div。
2. div 叫做 Question 1(id​​=question1)
3. 又增加了一个div。
4. div 称为 Question 2(id=question2)
5.First Div 被移除。
6.添加了另一个div。
7.New div 被称为 Question 2(id=question2)
8.Question 2(id=question2) 已经存在，因为第二个 div 没有被删除。当其中一个被删除时，我需要重新编号。下面是克隆 div 的代码：

function copyAppendQ() {
  question = document.getElementById("question");
  clone=question.cloneNode(true);
  numberOfQuestions = $('.question').length;
  id = "questioncon"+(numberOfQuestions);
  clone.id=id;
  question.parentNode.appendChild(clone);
  inid= "question"+(numberOfQuestions);
  optionid= "optionsdiv"+(numberOfQuestions);
  $('#'+id+' '+'.'+'questionin').attr('id', inid);
  $('#'+id+' '+'.'+'options').attr('id', optionid);
 $('#' + id + ' h2').html( 'Question ' + numberOfQuestions );
}

display:none和 div（当调用上述函数时，此 div 被隐藏但使用不同的 id 克隆，删除了原始 div 上设置的属性）

<div id="question" class="question">
                <h2></h2>
                <input id="questionin" class="questionin" style="width:341px;" ><input type="button" id="remq" onClick="javascript:$(this).parent().empty().remove();" style="background-color:#E12E1E;border:0;width:120px;color:#fff;" value="Remove Question">
                <h3>Options</h3>
                <div class="options">
                <label>a.</label><input class="option optiona"><input onClick="setAnswer(this.parentNode.id, this.className)" type="radio" class="a" name="answer">&nbsp;
                <label>b.</label><input class="option optionb"><input onClick="setAnswer(this.parentNode.id, this.className)" type="radio" class="b" name="answer">
                <div class="clear"></div>
                <label>c.</label><input class="option optionc"><input onClick="setAnswer(this.parentNode.id, this.className)" type="radio" class="c" name="answer">&nbsp;
                <label>d.</label><input class="option optiond"><input onClick="setAnswer(this.parentNode.id, this.className)" type="radio" class="d" name="answer">
                </div>  
                </div>

这可以在这里看到：http: //bit.ly/R8hB2m

4

1 回答 1

2

开始你的copyAppendQ功能：

copyAppendQ.id = (copyAppendQ.id || 0)+1;

然后在分配ID时：

id = "questioncon"+copyAppendQ.id;

这将确保您不会两次获得相同的 ID，即使问题已被删除。

于 2012-10-07T22:25:11.327 回答