克隆时如何将增量编号添加到 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 名称的需要并简化了您的代码。

Answer 2

这就是你要找的吗？我简化了代码，所以我不必输入所有的 id 和 fors 之类的东西。 http://jsfiddle.net/swm53ran/134/

$(document).ready(function() {
    var count = 0;
    $('.add').on('click', function() {
        count++;
        var clone = $('.template').clone('true').removeClass('template');
        clone.find('textarea').attr('id', 'textarea' + count);
        clone.find('textarea').html('Id: ' + clone.find('textarea').attr('id'));
        clone.appendTo('.sections');
    });
});

<a href="#" class="add">Add</a>
<div class="sections">
    <div class="template section">
        <input type="checkbox" /><br/>
        text <input type="text"/><br/>
        textarea <textarea id="textarea">Id: textarea</textarea>        
    </div>
</div>

虽然，我建议不要使用 id，但如果您打算使用它们，这应该可以满足您的目的。