javascript - 克隆时如何为ID添加增量编号

Question

我有一个表单字段，当单击“添加”按钮时，我会复制该表单字段。当一个ID重复时，我想为其添加一个增量编号。我下面的代码是在每个新 ID 的末尾附加一个 0，而不是计数。因此#mark-description 变为mark-description00 而不是#mark-description2。我在这里查看了其他几篇类似的帖子，但无法确定我做错了什么。任何想法将不胜感激。

注意:我使用 ids 是因为我使用的 jQuery 插件需要它们。

Javascript:

$('#add-character-button').on('click', function () {
var source = $('.mark:last'),
clone = source.clone();
var count = 0;

clone.find('.copyme').val($(this).attr('title')).attr('id', function(i, val) {
return val + count;
    });
     clone.insertAfter('.mark:last');
    });

HTML:

<div>
  <input class="checkbox" id="standard" name="mark-type" type="checkbox" value="Standard Character">
  <label class="no-placeholder" for="standard-character"></label>
  <div class="standard-mark-container">
    <div class="mark" id="mark-details">
      <div class="mark-name">
        <label class="placeholder" for="mark-name"><span>text</span></label>
          <input class="copyme" id="mark-name" name="mark-name" placeholder="" title="Enter your mark name" type="text">
      </div>
      <div class="description">
        <label class="placeholder" for="mark-description"><span>text</span
        </label>
        <textarea class="copyme" id="mark-description" name="mark-description" placeholder="" title="Enter a description"></textarea>
      </div>
      <div class="remove"> <a class="remove-mark-button" href="#" id="remove-character-button"><span>Remove</span></a>
      </div>
    </div>
   </div>
 <div class="add-mark"><a class="add-mark-button" href="#" id="add-character-button"><span>+ Add</span></a></div>  
</div>

Answer 1

您甚至可能不应该在您正在克隆的项目上使用 ID。并且您应该在字段名称中使用数组访问符号(即 mark-name[])。如果没有这个，您只会获得发布的同名重复字段之一。

这是我的建议。

HTML:

<div>
  <input class="checkbox" id="standard" name="mark-type" type="checkbox" value="Standard Character">
  <label class="no-placeholder" for="standard-character"></label>
  <div class="standard-mark-container">
    <div class="mark">
      <div class="mark-name">
        <label class="placeholder"><span>text</span>
          <input class="copyme" name="mark-name[]" placeholder="" title="Enter your mark name" type="text">
        </label>
      </div>
      <div class="description">
        <label class="placeholder"><span>text</span>
          <textarea class="copyme" name="mark-description[]" placeholder="" title="Enter a description"></textarea>
        </label>
      </div>
      <div class="remove"><a class="remove-mark-button" href="#"><span>Remove</span></a>
      </div>
    </div>
   </div>
 <div class="add-mark"><a class="add-mark-button" href="#" id="add-character-button"><span>+ Add</span></a></div>  
</div>

JavaScript:

$('#add-character-button').on('click', function() {
    // make clone
    $template = $('.mark:last');
    var $clone  = $template.clone();
    // set values to default in clone
    $clone.find('.copyme').each(function() {
        $(this).val($(this).attr('title'));
    });
    // insert into DOM
    $clone.insertAfter($template);
});

$('.remove').on('click'), function() {
    $(this).closest('.mark').remove();
});

这完全消除了修改 ID 名称的需要并简化了您的代码。