Question

我是一个热衷于学习的业余爱好者。

在大家的帮助下，我已经弄清楚了如何克隆元素并根据元素的顺序更改Add和Remove按钮。

我也在朋友Google的帮助下弄清楚了如何做增量ID。我需要这个，因为数据已发送到外部解决方案。

现在，我正在尝试将两种解决方案融合在一起。克隆该元素并更改其旁边的标签可以正常工作。但是由于某种原因，增量ID并不是。

有人会这么友好地告诉我我哪里出问题了吗？

$(function() {
  $(document).on('click', '.btn-add', function(e) {
    e.preventDefault();

    var controlForm = $(this).closest('.controls').find('form:first'),
      	currentEntry = $(this).parents('.entry:first'),
      	newEntry = $(currentEntry.clone()).appendTo(controlForm),
      	regex = /^(.+?)(\d+)$/i,
		cloneIndex = $(".entry").length;

    newEntry.find('input').val('');
    controlForm.find('.entry:not(:last) .btn-add')
    	.removeClass('btn-add').addClass('btn-remove')
      	.removeClass('btn-success').addClass('btn-danger')
      	.attr("id", "entry" +  cloneIndex)
        .find("*")
        .each(function() {
            var id = this.id || "";
            var match = id.match(regex) || [];
            if (match.length == 3) {
                this.id = match[1] + (cloneIndex);
            }
        })
      .html('<span class="icon_minus_alt2"></span>');
  })

  .on('click', '.btn-remove', function(e) {
    $(this).parents('.entry:first').remove();

    e.preventDefault();
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="controls">
  <form class="school_form" role="form" autocomplete="off">
    <div id="entry" class="entry input-group">
      <input type="text" name="opl_datum" placeholder="Periode">
      <input type="text" name="diploma" placeholder="Diploma">
      <input type="text" name="school" placeholder="School">
      <span class="input-group-btn">
        <button class="btn btn-success btn-add enableOnInput" type="button">
          <span>Voeg opleinding toe</span>
        </button>
      </span>
    </div>
  </form>
</div>

Answer 1

您需要更改div ID，而不是按钮的ID。这有效：

$(function() {
  $(document).on('click', '.btn-add', function(e) {
    e.preventDefault();

    var controlForm = $(this).closest('.controls').find('form:first'),
      	currentEntry = $(this).parents('.entry:first'),
      	newEntry = $(currentEntry.clone()).appendTo(controlForm),
      	regex = /^(.+?)(\d+)$/i,
		cloneIndex = $(".entry").length;

    newEntry.find('input').val('');
    // Change div id
    newEntry.attr("id", "entry" +  cloneIndex);
    controlForm.find('.entry:not(:last) .btn-add')
    	.removeClass('btn-add').addClass('btn-remove')
      	.removeClass('btn-success').addClass('btn-danger')
        // Not this one
      	//.attr("id", "entry" +  cloneIndex)
        .find("*")
        .each(function() {
            var id = this.id || "";
            var match = id.match(regex) || [];
            if (match.length == 3) {
                this.id = match[1] + (cloneIndex);
            }
        })
      .html('<span class="icon_minus_alt2"></span>');
  })

  .on('click', '.btn-remove', function(e) {
    $(this).parents('.entry:first').remove();

    e.preventDefault();
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="controls">
  <form class="school_form" role="form" autocomplete="off">
    <div id="entry" class="entry input-group">
      <input type="text" name="opl_datum" placeholder="Periode">
      <input type="text" name="diploma" placeholder="Diploma">
      <input type="text" name="school" placeholder="School">
      <span class="input-group-btn">
        <button class="btn btn-success btn-add enableOnInput" type="button">
          <span>Voeg opleinding toe</span>
        </button>
      </span>
    </div>
  </form>
</div>

jQuery克隆元素和增量ID

1 个答案: