javascript - 在循环内按下按钮时创建多个元素(输入)

Question

我的目标是拥有包含开始输入的表单，如果按下旁边的“+”按钮，它将在其下方创建另一个输入。所有这些输入最终都将插入到 AJAX 中。

现在我的表单位于 PHP foreach 循环内，因此我有多个表单，每个表单都有自己的一组输入和按钮。

如果我单击每个表单中的“+”按钮，它将在下面创建一个新输入，但我试图将每个表单限制为 10 个输入，它会像这样跨越所有表单:

因此，在该图像中，我单击第一个表单的“+”按钮 3 次(最多第 4 项)，然后在下一个表单中按该按钮，得到第 5 项。

这里的功能基本上可以正常工作，但我需要每个表单都有自己的输入，最多 10 个。这样，如果他们在任何表单上保存项目，我就只能将这些输入传递给 AJAX。

<form id="Items" method="post">

   <label id="ItemLabel">Item 1:</label>
   <input type="text" name="Items[]"><br/>
   <button type="button" class="moreItems_add" onclick="moreItems(this);">+</button>

    <input type="hidden" name="tickerID" id="tickerID" value="xyz">
    <input type="submit" name="saveTickerItems" value="Save Ticker Items">  

</form>

<!-- ticker modal JS -->
<script type="text/javascript">

var maxItems = 1;

function moreItems(button) {
  if (maxItems < 10) {
    var label = document.createElement("label");
    label.id="ItemLabel"+maxItems;
    label.innerHTML = "Item "+(maxItems+1)+": ";
    var input = document.createElement("input");
    input.type='text';
    input.name = 'item'+maxItems;

    $($(label)).insertBefore($(button));
     $($(input)).insertBefore($(button));
     //Insert a line break so that the next label and input are on new line
     $('<br/>').insertBefore($(button));
    maxItems++;
  }
}

</script>

Answer 1

您使用全局变量作为计数器，因此它会随着每个表单的每次使用而递增。为什么不让按钮检查表单中的内容并自行计数？当您使用它时，不妨使用完整的 jQuery。

$("button.moreItems_add").on("click", function(e) {
  var numItems = $("input[type='text']", $(this).closest("form")).length;
  if (numItems < 10) {
    var html = '<label class="ItemLabel">Item ' + (numItems + 1) + ': </label>';
    html += '<input type="text" name="Items[]"/><br/>';
    $(this).before(html);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="Items" method="post">
   <label class="ItemLabel">Item 1:</label>
   <input type="text" name="Items[]"><br/>
   <button type="button" class="moreItems_add">+</button>
   <input type="hidden" name="tickerID" id="tickerID" value="xyz">
   <input type="submit" name="saveTickerItems" value="Save Ticker Items">
</form>

您还按顺序命名了文本输入，我认为这是一个错误？