Question

我有一个div，我想根据用户输入值克隆。它在页面加载时使用默认值正常工作，但是当值改变时，它会成倍增加。例如，默认输入值为3，在页面加载时，它将现有div克隆两次，产生3个div，但是当我将值增加到4时，它显示12.这是HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="cta-num-select">Show Items: </lebel><input id="cta-num-select" name="cta-num-select" type="text" value="3" size="2">
<div class="cta-block">
    <div class="cta-block-item-wrap cta-icon-image">
        <label for="item-chooser">FA Icon/Image: </label><select class="item-chooser" name="item-chooser"><option value="fontawesome">FontAwesome Icon</option><option value="image">Image</option></select>
    </div>
    <div class="cta-block-item-wrap cta-option cta-option-image">
        <label for="block-image">Upload Image: </label><input name="block-image" class="block-image" type="text" value=""><input type="button" class="cta-insert-image button button-primary button-large" value="Upload">
    </div>
    <div class="cta-block-item-wrap cta-option cta-option-fontawesome">
        <label for="fa-icon-class">Choose FA Icon: </label><input type="text" name="fa-icon-class" class="fa-icon-class" value="">
    </div>
</div>

而且，jQuery：

$('#cta-num-select').on('change', function(){
    var noi = $(this).val();
    var e = $('.cta-block');
    e.not(':first').remove();
    //var present = e.length;
        for (var i = 0; i < (noi -1); i++) {
                e.clone().insertAfter(e);
        }
}).trigger('change');
$('.item-chooser').on('change', function() {
    var $this=$(this),
    $container=$this.closest('.cta-block'),
    option = $this.val();
    $container.find('.cta-option').slideUp();
    $container.find('.cta-option-'+option).stop(true).slideDown();
}).trigger('change');

我做了Fiddle以更好地展示我面临的问题。请帮忙

Answer 1

这是因为即使您从dom中删除除第一个克隆之外的所有克隆，e仍然会包含所有元素。

您应该只克隆第一个元素

$('#cta-num-select').on('change', function () {
    var noi = $(this).val();
    var e = $('.cta-block');
    e.not(':first').remove();
    //var present = e.length;
    for (var i = 0; i < (noi - 1); i++) {
        e.first().clone().insertAfter(e);
    }

}).trigger('change');

我可能会使用稍微不同的实现，例如

，而不是删除和添加所有元素

＆＃13;

$('#cta-num-select').on('change', function() {
  var noi = +$(this).val() || 0;
  noi = noi < 1 ? 1 : noi;

  var e = $('.cta-block'),
    $first = e.first();
  e.slice(noi).remove();
  for (var i = e.length; i < noi; i++) {
    $first.clone().insertAfter('.cta-block:last');
  }
}).trigger('change');
$('.item-chooser').on('change', function() {
  var $this = $(this),
    $container = $this.closest('.cta-block'),
    option = $this.val();
  $container.find('.cta-option').slideUp();
  $container.find('.cta-option-' + option).stop(true).slideDown();
}).trigger('change');

＆＃13;

.cta-block-item-wrap {
  border-bottom: 1px solid #eeeeee;
  padding: 10px 0;
}
.cta-image-upload,
.cta-fa-icon {
  display: none;
}
.cta-block-item-wrap > label {
  font-size: 12px;
  font-weight: bold;
  margin: 0 50px 0 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label for="cta-num-select">Show Items:</label>
<input id="cta-num-select" name="cta-num-select" type="text" value="3" size="2">
<div class="cta-block">
  <div class="cta-block-item-wrap cta-icon-image">
    <label for="item-chooser">FA Icon/Image:</label>
    <select class="item-chooser" name="item-chooser">
      <option value="fontawesome">FontAwesome Icon</option>
      <option value="image">Image</option>
    </select>
  </div>
  <div class="cta-block-item-wrap cta-option cta-option-image">
    <label for="block-image">Upload Image:</label>
    <input name="block-image" class="block-image" type="text" value="">
    <input type="button" class="cta-insert-image button button-primary button-large" value="Upload">
  </div>
  <div class="cta-block-item-wrap cta-option cta-option-fontawesome">
    <label for="fa-icon-class">Choose FA Icon:</label>
    <input type="text" name="fa-icon-class" class="fa-icon-class" value="">
  </div>
</div>

＆＃13;

Answer 2

目前，您正在克隆所有元素并插入

var e = $('.cta-block'); // getting all cta-block elements
... and 
e.clone().insertAfter(e); //apending all elements in loop

现在，您应该获取应该克隆的第一个元素并删除所有其他元素，例如

var e = $('.cta-block:first'); // get the first element only
$('.cta-block:gt(0)').remove(); // remove all except first

Live Demo

Answer 3

首次加载后选择$('.cta-block')时，会产生一个div类数组.cta-block，在这种情况下为3，因此循环运行3乘以4（输入值）即12次。您需要确保元素e的长度不应大于1.

这是纠正http://jsfiddle.net/hnco3Lfq/

的小提琴

Answer 4

您可以像这样更改保存第一个div的副本 var e = $（'。cta-block'）。first（）; 然后删除第一个元素之后的所有元素： $（ 'CTA-块。 '）不是（'：第一'）除去（）;

。

根据输入值克隆div

4 个答案: