Question

更新：使用colecmc提供的代码（谢谢!!）我更新了codepen。我喜欢如何添加date.now，但我想只是增加一点。我不知道如何将其应用于此函数我尝试了zer00ne的索引增量，但我做错了。

let cloneList = [],
    index = 0; // index must be declared apart from function or else you will set it to the initial value every time the function is called.

document.getElementById('launch').onclick = function(event) {
  event.preventDefault();

  var addOnDiv = document.getElementById('addon');
  var container = document.getElementById('add-components')
  var clonedNode = addOnDiv.cloneNode(true);
  var component = clonedNode.querySelector('input');
  index++;
  clonedNode.id = index+1;

  cloneList.push(clonedNode.id);

  component.id = `componentID_${clonedNode.id}`;
  component.name = `componentName_${clonedNode.id}`;

  container.appendChild(clonedNode);
}

我的表单存在问题。最初我在页面上有两个表单。但是在提交时，只写了第一个表格中的信息。我尝试合并表格。现在，如果我填写广告系列和组件输入并将其写入正确的表格（好！）。但是组件部分应该被复制。广告系列可以包含用户想要的任意数量的组件。我正在使用cloneNode，在我合并表之前，它添加了更多的组件部分。现在它们组合在一起，功能不再有效。我很困惑，如果这是我正在做的事情的正确方法。我加入了一个copdpen，显示了我试图做的简化版本。

基本上我希望能够按下添加组件，添加尽可能多的新组件，因为我要将它们填满，然后将所有内容写入数据库。我需要一种方法来区分所有克隆（新的ID或名称？） codepen：https://codepen.io/anon_guy/pen/VMZWWW?editors=1010

HTML：

<div class="panel panel-default">
  <div class="panel-heading">
  </div>
  <div class="panel-body">
    <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form-event" class="form-horizontal">
      <div class="col-sm-4">
        <label>name</label>
        <input type="text" name="name" value="name" placeholder="name" id="name" class="form-control" />
      </div>
      <div class="col-sm-4">
        <label>address</label>
        <input type="text" name="address" value="address" placeholder="address" id="address" class="form-control" />
      </div>
      <div class="col-sm-4">
        <label>phone</label>
        <input type="text" name="phone" value="phone" placeholder="phone" id="phone" class="form-control" />
        <div class="text-danger"></div>
      </div>

  </div>
  <div class="row">
  <div class="add_component">
    <button id='launch'>Add Component</button>
  </div>
  </div>
</div>
<div class="wrapper" id="add-components">
  <div class="panel panel-default " id="addon">
    <div class="panel-heading">
    </div>
    <div class="panel-body">

        <div class="col-sm-6">
          <label>component</label>
          <input type="text" name="component" value="component" placeholder="component" id="component" class="form-control" />
        </div>

      </form>
    </div>
  </div>
</div>

JS：

document.getElementById('launch').onclick = function() {
      var addOnDiv = document.getElementById('addon');
  var container = document.getElementById('add-components')
      var clonedNode = addOnDiv.cloneNode(true);
        container.appendChild(clonedNode );
    }

Answer 1

在添加到容器<Project Sdk="Microsoft.NET.Sdk"> <PropertyGroup> <TargetFramework>netstandard1.4</TargetFramework> </PropertyGroup> <ItemGroup> <Folder Include="v1\Messages\List\" /> </ItemGroup> <ItemGroup> <ProjectReference Include="..\Domain\Domain.csproj" /> </ItemGroup> </Project>

之前，您需要尝试这样的操作

这将提供一种通过提供唯一ID来区分所有克隆的方法。你可以更进一步：

clonedNode.id = Date.now();

let cloneList = [];
document.getElementById('launch').onclick = function(event) {
  event.preventDefault();

  var addOnDiv = document.getElementById('addon');
  var container = document.getElementById('add-components')
  var clonedNode = addOnDiv.cloneNode(true);
  var component = clonedNode.querySelector('input');

  clonedNode.id = Date.now();
 
  cloneList.push(clonedNode.id);

  component.id = `componentID_${clonedNode.id}`;
  component.name = `componentName_${clonedNode.id}`;

  container.appendChild(clonedNode);
}

Answer 2

通过查看您的代码，这是我最接近我认为的思维方式。（我还删除了代码中的一些不必要的步骤，使其更清晰一些）。这适用于您的输入必须具有不同的名称和ID：s。但是，如果您可以设置两者都相同（即component_0，other_0等），则可以删除“names”数组和“名称”forEach。

当你想为你的addon-div添加一个输入时，只需要在没有“_0”的情况下将ID（和名称，如果你决定保留它）添加到数组中，如示例所示。

在html中将名称更改为“otherName_0”并将ID更改为“otherID_0”，这应该可以。

var i = 1;
document.getElementById('launch').onclick = function(event) {
  event.preventDefault();

  var addOnDiv = document.getElementById('addon');
  var container = document.getElementById('add-components')
  var clonedNode = addOnDiv.cloneNode(true);
  var ids = ['componentID', 'otherID'];
  var names = ['componentName', 'otherName'];

  ids.forEach(function(id) {
    var currentInput = clonedNode.querySelector(`#${id}_0`);
    currentInput.id = `${id}_${i}`;
  });

  names.forEach(function(name) {
    var currentInput =  clonedNode.querySelector(`input[name=${name}_0]`);
    currentInput.name = `${name}_${i}`;
  });

  container.appendChild(clonedNode);
  i++;
}

复制和区分表单

2 个答案: