Question

这是我的jQuery添加和删除文本框任务，我只想在添加按钮上添加我以前的所有文本框。因此，如果我第一次单击，它将只添加1，如果再次单击，它将添加第二个文本框，如果再次单击，它将为我添加第三个文本框。我只想计算计数器变量，然后在其中添加+2文本框。

$(document).ready(function() {

  var counter = 2;

  $("#addButton").click(function() {

    if (counter > 10) {
      alert("Only 10 textboxes allow");
      return false;
    }

    var newTextBoxDiv = $(document.createElement('div'))
      .attr("id", 'TextBoxDiv' + counter);

    newTextBoxDiv.after().html('<label>Textbox #' + counter + ' : </label>' +
      '<input type="text" name="textbox' + counter +
      '" id="textbox' + counter + '" value="" >');

    newTextBoxDiv.appendTo("#TextBoxesGroup");


    counter++;
  });

  $("#removeButton").click(function() {
    if (counter == 1) {
      alert("No more textbox to remove");
      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);
  });
});

div {
  padding: 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<h1>jQuery add / remove textbox example</h1>

<div id='TextBoxesGroup'>
  <div id="TextBoxDiv1">
    <label>Textbox #1 : </label><input type='textbox' id='textbox1'>
  </div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>

Answer 1

如果我了解您希望创建的输入数始终是偶数。

非常简单，只需检查$("#TextBoxesGroup input").length % 2是否为0或1并使用loop创建输入（最后一个将同时创建一个或输入）

请参见以下代码段：

$(document).ready(function() {

  var counter = 2;

  $("#addButton").click(function() {

    if (counter > 10) {
      alert("Only 10 textboxes allow");
      return false;
    }
    
    var num_to_create = 0;
    $("#TextBoxesGroup input").length%2 === 0 ? num_to_create = 2 : num_to_create = 1;
    
    
    for(var inc=0 ; inc < num_to_create; inc++) {
      var newTextBoxDiv = $('<div>')
        .attr("id", 'TextBoxDiv' + counter);

      newTextBoxDiv.after().html('<label>Textbox #' + counter + ' : </label>' +
        '<input type="text" name="textbox' + counter +
        '" id="textbox' + counter + '" value="" >');

      newTextBoxDiv.appendTo("#TextBoxesGroup");
      
      counter++;
      
    }
    


    
  });

  $("#removeButton").click(function() {
    if (counter == 1) {
      alert("No more textbox to remove");
      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);
  });
});

div {
  padding: 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<h1>jQuery add / remove textbox example</h1>

<div id='TextBoxesGroup'>
  <div id="TextBoxDiv1">
    <label>Textbox #1 : </label><input type='textbox' id='textbox1'>
  </div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>

jQuery添加和删除文本框添加所有预览文本框

1 个答案: