根据输入值克隆div [英] Clone a div based on input value

问题描述

我有一个要基于用户输入值克隆的div.在使用默认值加载页面时，它可以正常工作，但是当该值更改时，它会成倍增加.例如，默认输入值为3，并且在页面加载时，它会将现有的div克隆两次，使其成为3 div，但是当我将该值增加到4时，它将显示为12.这是HTML:

I have a div that I want to be cloned based on user input value. It works fine on page load with default value, but when the value is changed, it gets multiplied. For example, the default input value is 3 and on page load, it clones the existing div twice making the 3 divs, but when I increase the value to 4, it shows 12. Here is the 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');  

我做了一个小提琴以更好地说明我面临的问题.请帮助

I made a Fiddle for better demonstrating the issue I am facing. Please help

推荐答案

这是因为即使您从dom中删除除第一个克隆之外的所有克隆，e仍将具有所有元素.

It is because even though you are removing all clones except the first one from the dom, e will still have all the elements.

您应该仅克隆第一个元素

You should clone only the first element

$('#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');

---

我可能会使用稍微不同的实现方式，而不是删除和添加所有元素，例如

---

Instead of removing and adding all elements, I might use a slightly different implementation like

$('#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');

.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;
}

<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>

这篇关于根据输入值克隆div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！