在jQuery中添加文本框

Question

我正在尝试使用jquery创建具有动态ID的mcq问题。 但是当我为每个问题的选项定义唯一的ID时，我陷入了困境。 有人可以帮助我找到为每个mcq选项创建唯一ID的方法吗？ 下面是我的jQuery

<html>
<head>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
</head>

<body>
<script type="text/javascript">

$(document).ready(function(){
var counter = 2;//question

$("#addQuestion").click(function () {

var newTextBoxDiv = $(document.createElement('div'))
     .attr("id", 'TextBoxDiv' + counter);

newTextBoxDiv.after().html('<label>Q'+ counter + ' : </label>' +
      '<input type="text" name="textbox' + counter + 
      '" id="textbox' + counter + '" value="" >' + '</br>' + 
      '<label>A. </label>'+
      '<input type="text" id="Q'+counter+'choice1">' +
      '<input type="button" value="Add Option" id="'+ counter + '">');

newTextBoxDiv.appendTo("#TextBoxesGroup");


counter++;
 });

 $("#removeQuestion").click(function () {
if(counter==1){
      alert("No question that can be deleted");
      return false;
   }   

counter--;

    $("#TextBoxDiv" + counter).remove();

 });

 //$("#getButtonValue").click(function () {

// var msg = '';
//for(i=1; i<counter; i++){
 // msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
//}
//      alert(msg);
 //});
});
</script>
</head><body>

这是HTML

<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
    <label>Q1 : </label><input type='textbox' id='textbox1' ></br>
    <label>A. <input type='text' id='Q1choice1'>
    <input type='button' value='Add Option' id='1'>
</div>
</div>
<input type='button' value='Add Question' id='addQuestion'>
<input type='button' value='Remove Question' id='removeQuestion'>

</body>
</html>

Answer 1

您必须在document.ready之前定义var计数器

Does not work: 
$(document).ready(function () {
        var counter = 2;//question



  Works:
var counter = 2;//question
$(document).ready(function () {

编辑：$（document）.ready外定义了计数器是唯一的全局

Answer 2

尝试在代码中附加newTextBoxDiv：

   .... var newTextBoxDiv = $(document.createElement('div'))...
         .attr("id", 'TextBoxDiv' + counter);
    $('body').append(newTextBoxDiv);
  ...  newTextBoxDiv.after().html('<label>Q'....

$（ '主体'）追加（newTextBoxDiv）。

Answer 3

尝试这样的事情

  var counter = $("#TextBoxesGroup div").length;

在jQuery中添加文本框

问题描述

3 个解决方案

解决方案1
1 已采纳 2013-11-14 08:25:36

解决方案2
0 2013-11-14 08:24:20

解决方案3
0 2013-11-14 08:27:09

在jQuery中添加文本框

问题描述

3 个解决方案

解决方案1 1 已采纳 2013-11-14 08:25:36

解决方案2 0 2013-11-14 08:24:20

解决方案3 0 2013-11-14 08:27:09

解决方案1
1 已采纳 2013-11-14 08:25:36

解决方案2
0 2013-11-14 08:24:20

解决方案3
0 2013-11-14 08:27:09