根据输入值克隆div

debugcn 发表于 Dev

阿比克

我有一个要基于用户输入值克隆的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');

我做了一个小提琴，目的是更好地说明我面临的问题。请帮忙

阿伦·约翰尼（Arun P Johny）

这是因为即使您从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');

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。