Question

我有一个表单字段，当我点击＆＃34;添加＆＃34;按钮。当ID重复时，我想为其添加一个增量编号。我的下面的代码是在每个新ID的末尾添加0而不是计数。因此#mark-description成为mark-description00而不是#mark-description2。我在这里看了几个其他类似的帖子，但我无法确定我做错了什么。任何想法都会非常感激。

注意：我使用ID是因为我使用的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，但如果您打算使用它们，这应该适用于您的目的。

克隆时如何向ID添加增量编号

2 个答案: