添加一个输入字段，循环它并将值输出到 div答案

【问题标题】：Adding a input field, looping though it and outputting values to a div添加一个输入字段，循环它并将值输出到 div
【发布时间】：2017-08-24 07:25:55
【问题描述】：

我有点生疏，所以这可能是一个简单的修复。我正在尝试获取通过添加更多按钮动态添加输入字段的代码。然后使用jquery，代码然后循环获取输入字段的值并附加一个div。这就是我到目前为止所拥有的。

$(function() {
  $('.addurl').click(function() {
    $('.more').add('<input name="more" type="text" class="test">').appendTo('.more');
  });
  
  $('.more').on('change', function() {
    $('.test').each(function() {
      var test = $(this).val();
      alert(test);
      $("<div id='urlnm2'> URL:" + test + "</div>").appendTo($('#urlnm'));
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="url" name="url" type="text">
<div class="more"></div>
<button type="button" class="addurl">Add more</button>

问题是当我点击添加第一个输入字段时，我的输出是

网址1

网址2

这是我想要的，但如果我添加第三个输入字段，我的输出是

网址1

网址2

网址3

这不是我想要的。我需要它

网址1

网址2

网址3

请帮忙。我已经坚持了一天。谢谢

【问题讨论】：

请也发布 idurlnm 的 HTML
@AlivetoDie 我已将其添加到代码 sn-p 中，我只能假设这就是 OP 的意图。
@Terry 我认为您必须恢复这两个更改，并让 OP 必须放置他自己的 HTML 和脚本代码。那里。将代码更改并添加到 OP 的问题中真的很糟糕，因为它会改变问题的整个结构/含义。请恢复原状
除了将其移植到代码 sn-p 并添加 ID 为 urlnm 的 div 之外，我没有进行任何更改。如果您认为这很糟糕，我相信您有权回滚：不会对此提出异议。
成为 OP。实际上，答案正是我所需要的。非常感谢@Satpal

标签： javascript jquery html

【解决方案1】：

您应该使用.empty() 清除div 的内容，然后使用.append()。

$(function() {
  $('.addurl').click(function() {
    $('.more').add('<input name="more" type="text" class="test">').appendTo('.more');
  });

  $('.more').on('change', '.test', function() {
    var container = $('#urlnm').empty();
    $('.test').each(function() {
      //if you want to use id, create a mechanism so that identifiers must be unique
      $("<span> URL:" + $(this).val() + "</div>").appendTo(container);
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="url" name="url" type="text" class="test">
<div class="more"></div>
<button type="button" class="addurl">Add more</button>
 <!-- Create this div -->
<div id="urlnm"></div>

另请注意：HTML 中的标识符必须是唯一的

【讨论】：

【解决方案2】：

添加了一个“更干净”的版本，恕我直言。

首次输入后显示结果
你实际上可以删除more类框
删除 div change 事件处理

奖金：

同步所有输入文本框的更改

$(function() {

  $('.addurl').click(function(e) {

    // clear result box
    $('#result').empty();

    // read all input textbox and show result
    $("#box-input .test").each(function() {
      var inputValue = $(this).val();
      addOutputBox(inputValue);
    });

    // add input textbox
    $('<input type="text" class="test"><br/>').appendTo('#box-input');

  });

  function addOutputBox(urlValue) {
    $("<div class='output'>URL: " + urlValue + "</div>").appendTo('#result');
  }

  // handle input even on all textboxes
  $("#box-input").on("input", ".test", function(e) {
  
    // console.log("changes", currentIndex, $(this).val() );
    
    var totalOutput = $("#result .output").length;
    var totalInput = $("#box-input .test").length;
    
    if ( totalOutput === 0 || totalOutput < totalInput) {
      var inputValue = $(this).val();
      addOutputBox(inputValue);
      return;
    }
    
    // Get current index of the input textbox
    var currentIndex = $("#box-input .test").index( this );
    
    // Output[currentIndex] = Input[currentIndex] 
    $("#result .output").eq(currentIndex).html("URL: " + $(this).val() );
    
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="box-input">
  <input id="url" name="url" class="test" type="text"><br/>
</div>

<button type="button" class="addurl">Add more</button>

<div id="result"></div>

【讨论】：