Question

我有一个名为duplicator1的部分。我想要克隆该部分并且它可以工作但我的问题是克隆部分时id的元素是相同的，所以如何在克隆部分时更改id。

我的js功能

var countCopies1;
var clone ;

function duplicate() {
    var original = document.getElementById('duplicater1');
    clone = original.cloneNode(true); 
    var countCopies = $('body').html().split('duplicater').length;
    clone.id = "duplicater"+countCopies;
    original.parentNode.appendChild(clone);
    countCopies1 = countCopies;
}

我的表名为duplicater1。当我将其id重复更改为duplicater2，duplicater3等等，但我的id客户，项目，帖子，小时在新的重复表中保持不变。我怎样才能更改它们＆amp;我需要duplicater2 ID customer1，project1，post1，hours1。

如果你帮助我，我将感激不尽！

<div id="duplicater1"> 

    <br></br>

  <table class="table table-bordered">

    <thead>
      <tr>
        <th style="width:16%;text-align:center">{Customer}</th>
        <th style="width:16%;text-align:center">{Project}</th>
        <th style="width:16%;text-align:center">{Activity}</th>
        <th style="width:16%;text-align:center">{Hours}</th>
        <th style="width:16%;text-align:center">{Comment}</th>
        <th style="width:5%"> </th>
      </tr>
    </thead>

<tbody>

    <td>
        <div class="form-inline" style="text-align:center"><select style="width:200px" id="customer" class="form-control" onchange="getCustomerAddWork(this)">{CUSTOMERS}</select></div>
    </td>

    <td>
        <div class="form-inline" style="text-align:center"><select style="width:200px" id="project" class="form-control" onchange="getProjectAddWork(this)"></select></div>
    </td>

    <td>
        <div class="form-inline" style="text-align:center"><select style="width:200px" id="post" class="form-control"></select></div>
    </td>

     <td>
        <div class="form-inline" style="text-align:center">
        <div class="form-group">
            <input type="number" class="form-control" id="hours" placeholder="{Hours}">
        </div>
        </div>
    </td>

    <td>
        <div class="form-inline" style="margin-bottom:1em;text-align:center">
        <div class="form-group">
            <textarea class="form-control"  id="comment" placeholder="{Comment}"></textarea>
        </div>
        </div>
    </td>

    <td>
        <button type="button" class="btn btn-danger" style="width:70px" 
 onclick="Remove()">{Delete}</button>
        </td>

    </tbody>

 </table>  

 </div>
</div>
    <div class="container-fluid bg-2 text-center" style="margin-top:5em;margin-bottom:3em;">

    <button type="button" class="btn btn-success" onclick="duplicate()">{Add}</button>
<button type="button" class="btn btn-info" onclick="AddWork()">{Submit}</button>
<button type="button" class="btn btn-primary" onclick="Redirect()">{Cancel}</button>  

</div>
 </form>

Answer 1

既然你有jQuery，我会做这样的事情：

var original = $("#duplicater1");


function duplicate() {
    var countCopies = $("[id^='duplicater']").length + 1;
    var cloned = original.clone();
    var cloned.attr("id", "duplicater" + countCopies);
    $(cloned).find("[id]").each(function(){
        var current = $(this);
        var currentId = current.attr("id");
        var ids = $("[id='" + currentId + "']");
        if(ids.length > 1 && ids[0]==this){
            var newId = currentId.substring(0, currentId - 1);
            current.attr("id", newId + countCopies);
        }

    });
    original.parent().append(cloned);

}

Answer 2

我的表名为duplicater1。当我复制它时，id更改为 duplicater2，duplicater3等，但是我的id客户，项目，帖子，小时在新的重复表中保持不变。我怎样才能更改它们＆amp;一世需要在duplicater2 id customer1，project1，post1，hours1。

是的，因为重复的标识符不是好标记，所以你确实应该更改它们。但是，唯一可识别容器中的重复标识符在功能上不是问题（尽管仍然应该更改）。

要解决您的实际问题，是的，您可以编写一个循环，遍历duplicator容器中的每个元素，并为其添加一个数字，我确定有答案显示如何和它们非常好。

但我会尝试以另一种方式解决重复的标识符问题，而这种方式并不需要维护代码来执行此操作。

我在这些场景中的众多Web项目中使用的方法是使用data-id作为属性来标识容器，并允许您将它们以及内部元素分组。

注意，您可以使用类或数据-xxx或者您喜欢的内容，我个人更喜欢这些情况下的数据ID

不要使用<div id="duplicater1/2/3">，而只需使用<div data-id="duplicater">来识别＆＃34;类型＆＃34;您正在使用的组件/表单。

在内部，对每个元素执行相同操作，例如<select data-id="customer">或<select data-id="project">

这解决了克隆问题，因为您现在可以克隆每个问题复制器，根本不需要重命名，你也不需要需要维护自定义代码重命名元素标识符

关于绑定事件，您不必担心它们，因为每个元素引发getProjectAddWork(this)之类的事件已经在上下文中。

假设您触发getProjectAddWork(this)事件并需要访问您所在的复制器容器，您可以简单地执行与$(this).closest('[data-id="duplicator"]');类似的操作或访问外部表单$(this).closest('form');等..

当然，您可以通过仅重命名复制器ID来实现相同目的，然后执行$(this).closest('#duplicator');但我认为我宁愿防止重复的标识符，也不必维护代码来重命名标识符以及基本选择器在各自的＆＃34;组件＆＃34;

中进行上下文感知

我使用jQuery标记您的问题，但您可以使用纯JavaScript执行相同的操作

js如何使用自己的新id更改克隆表单中的id

2 个答案: