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

【问题标题】：Change label to match numeric part from ID更改标签以匹配 ID 中的数字部分
【发布时间】：2016-07-01 07:32:25
【问题描述】：

我有这个 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一样
标签文本需要是 Additional # + cloneCntr

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

Here is我正在玩这个的 jsFiddle

【问题讨论】：

具体有什么问题或疑问？
@charlietfl 更新了问题，让我知道现在是否更清楚
那么如果我添加一些并从顶部删除其中一些，文本应该说什么？
@charlietfl 现在，Additional + (latest+1)，例如你加 6 并删除位置 3 的那个，下一个文本应该是 Additional+7，想法是重新排序项目但我认为这比我想象的要复杂
您可以从克隆中获取标签并更新 for 属性...var forControl = $('label', clone).attr('for') 将获得您刚刚克隆的标签。

标签： javascript jquery clone

【解决方案1】：

您可以使用另一个函数来生成带有新的id 和for 属性的html，如下所示。

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

DEMO

【讨论】：

这样做，<div class="row"> 的结构将在 HTML 和 JS 中，这是一个维护噩梦。有人将最终改变一个而不是另一个。如果要使用此方法，则页面上的第一行原始行也应通过调用 getRow() 来创建。

【解决方案2】：

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

$('#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

【讨论】：