使用动态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

请尝试以下操作：

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来电。

Answer 2

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());

1. 我在第7行添加了'+$('#name').val()+'，在p标记之间添加了'+$('#number').val()+'到第9行。

2. 我还更改了您的号码字段的占位符文字。一切似乎都很好。

备注

除了一些语法错误，我没有发现任何重大问题。

新代码

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());

});