Question

我有这个HTML代码：

<div id="wrapper">
  <div class="row">
    <label for="additional_1">Additional #1 :</label>
    <input type="text" id="additional_1" name="pnr_remarks_modify[additional][]">
    <a href="#" class="addInput">New</a> - <a href="#" class="removeInput">Remove</a>
  </div>
</div>

我正在使用以下代码添加（克隆）/删除完整的'.row'元素：

var cloneCntr = 2;
$('#wrapper').on('click', '.addInput', function() {
  // clone the div
  var row = $(".row").last();
  var clone = row.clone();

  // change all id and name values to a new unique value
  $("*", clone).add(clone).each(function() {
    if (this.id) {
      this.id = (this.id).slice(0, -1) + cloneCntr;
    }
    if (this.name) {
      this.name = this.name;
    }
  });
  ++cloneCntr;
  $('#wrapper').append(clone);
});

$('#wrapper').on('click', '.removeInput', function(e) {
  e.preventDefault();
  var target = $(e.currentTarget);
  target.parent().remove();
})

每次点击New，我都会从前一个对象获得一个克隆，但会更改其ID。例如：

首先点击新

额外的＃1：新 - 删除

第二次点击新

额外的＃1：新 - 删除

但是你可以看到for attr和标签文字保持不变。我需要将它们更改为（在每个新克隆上）：

for需要与新ID
标签文字需要为附加＃+ cloneCntr

但我不知道如何实现这一部分，我可以得到一些帮助吗？

Here is jsFiddle我正在玩这个

Answer 1

每次添加或删除一行时，您都可以遍历所有行，并根据行索引进行更新。使用在两个事件处理程序中调用的一个函数

$('#wrapper').on('click', '.addInput', function() {
  var clone = $(".row").last().clone();
  clone.find('input').val(''); // clear value on clone input
  $('#wrapper').append(clone);
  updateCounts();
});

$('#wrapper').on('click', '.removeInput', function(e) {
  e.preventDefault();
  var target = $(e.currentTarget);
  target.parent().remove();
  updateCounts();
});


function updateCounts() {
  $('#wrapper .row').each(function(i) {
    var num = i + 1,
      $row = $(this),
      inputId = 'additional_' + num;

    $row.find('label').text('Additional #' + num + ' :').attr('for', inputId);
    $row.find('input').attr('id', inputId)
  });

}

的 DEMO

Answer 2

您可以使用其他功能生成html新id和for属性，如下所示。

function getRow(index){
    return '<div class="row">' +
                '<label for="additional_'+index+'">Additional #'+index+' :</label>' +
                '<input type="text" id="additional_' + index + '" name="pnr_remarks_modify[additional][]">' +
                '<a href="#" class="addInput">New</a> - <a href="#" class="removeInput">Remove</a>' +
           '</div>';
}

var cloneCntr = 2;
$('#wrapper').on('click', '.addInput', function () {
    var clone = getRow(cloneCntr);

    ++cloneCntr;
    $('#wrapper').append(clone);
});

更改标签以匹配ID中的数字部分

2 个答案:

DEMO