從輸入創建具有動態ID和值的段落

Question

我從兩個輸入創建兩個段落，但無法將輸入內容放入段落。

下面是代碼：

HTML

<form id="ip-form" class="custom-form wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.6s"> 
    <div class="row"> 
    <div class="col-6"> 
     <div class="form-group"> 
     <div class="input-group"> 
      <input type="text" class="form-control custom-input-form" id="name" placeholder="Name"> 
     </div> 
     </div> 
    </div> 
    <div class="col-6"> 
     <div class="form-group"> 
     <div class="input-group"> 
      <input type="number" class="form-control my-ip" id="number" placeholder="Name"> 
     </div> 
     </div> 
     <button type="submit" class="btn btn-gray no-side-margin float-right" id="add-new">Add</button> 
    </div> 
    </div> 
</form> 

<div class="row"> 
    <div class="col-6" id="new-names"> 
    </div> 
    <div class="col-6" id="new-numbers"> 
    </div> 
</div> 

JS

var countName = 0; 
var countNumber = 0; 

$('#add-new').on('click', function(e) { 
    e.preventDefault(); 
    $('#new-names').append('<p id="new-name-'+countName+'"></p>'); 
    countName++; 
    $('#new-numbers').append('<p id="new-number-'+countNumber+'"></p>'); 
    countNumber++; 

    $('#"new-name'+countName+'"').text($('#name').val()); 
    $('#"new-number'+countNumber+'"').text($('#number').val()); 

}); 

我也簡單Codepen的代碼創建：https://codepen.io/fabiozanchi/pen/PJyeap

謝謝！

Answer 1

Codepen

這裏是我做了什麼：

1. 固定上線12的一些語法和13

ORIGINAL

$('#"new-name'+countName+'"').text($('#name').val()); 
$('#"new-number'+countNumber+'"').text($('#number').val()); 

新

$('#new-name'+countName).text($('#name').val()); 
$('#new-number'+countNumber).text($('#number').val()); 

我添加'+$('#name').val()+'到第7行和'+$('#number').val()+'到線9，p標籤之間。

我還更改了您的號碼字段的佔位符文本。所有似乎都很好。

注意

除了一些語法錯誤，我沒有發現任何重大問題。

新代碼

HTML

<form id="ip-form" class="custom-form wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.6s"> 
    <div class="row"> 
    <div class="col-6"> 
     <div class="form-group"> 
     <div class="input-group"> 
      <input type="text" class="form-control custom-input-form" id="name" placeholder="Name"> 
     </div> 
     </div> 
    </div> 
    <div class="col-6"> 
     <div class="form-group"> 
     <div class="input-group"> 
      <input type="number" class="form-control my-ip" id="number" placeholder="Number"> 
     </div> 
     </div> 
     <button type="submit" class="btn btn-gray no-side-margin float-right" id="add-new">Add</button> 
    </div> 
    </div> 
</form> 

<div class="row"> 
    <div class="col-6" id="new-names"> 
    </div> 
    <div class="col-6" id="new-numbers"> 
    </div> 
</div> 

的JavaScript

var countName = 0; 
var countNumber = 0; 

$('#add-new').click(function(e) { 

    e.preventDefault(); 
    $('#new-names').append('<p id="new-name-'+countName+'">'+$('#name').val()+'</p>'); 
    countName++; 
    $('#new-numbers').append('<p id="new-number-'+countNumber+'">'+$('#number').val()+'</p>'); 
    countNumber++; 

    $('#new-name'+countName).text($('#name').val()); 
    $('#new-number'+countNumber).text($('#number').val()); 

}); 

Answer 2

嘗試以下操作：

var countName = 0; 
var countNumber = 0; 

$('#add-new').on('click', function(e) { 
    e.preventDefault(); 
    $('#new-names').append('<p id="new-name-' + (countName++) + '">' + $('#name').val() + '</p>'); 
    $('#new-numbers').append('<p id="new-number-' + (countNumber++) + '">' + $('#number').val() + '</p>'); 
}); 

儘量讓與DOM儘可能最小的相互作用。兩個.append和兩個.val電話就夠了。