Question

用户是否可以在<input>框中键入他们想要克隆的元素数量并附加到页面上？

问题是，当用户当前指定要克隆的元素数量时，元素数量大于想要在第二次点击时克隆的元素数量。另外，是否可以隐藏要在HTML和CSS中克隆的原始元素？请附上以下代码和JsFiddle Link。

＆＃13;

$("#btn").click(function() {
    var number = document.getElementById("member").value;
    var e = $('.col');
    for (i=0;i<number;i++) {
      e.clone().insertAfter(e);
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Specify Amount of Member Cards Required:<input placeholder="e.g. 2" type="text" id="member" name="member" value="">
<button id="btn" onclick="addinputFields()">Go</button>

<div>

</div>
<br>
<div class="col">Member Card</div>

＆＃13;

Answer 1

使用:first选择器仅克隆第一个

 $('.col:first').hide();
$("#btn").click(function() {
    var number = $("#member").val();
    var e = $('.col:first');
    $('.col').not('.col:first').remove();
    for (i=0;i<number;i++) {
      e.show().clone().insertAfter(e);
    }
    $('.col:first').hide();

});

演示：https://jsfiddle.net/j4jmyh0q/

Answer 2

轻微调整HTML和Javascript。

在下面添加了jsfiddle example代码。

<强> HTML

Specify Amount of Member Cards Required:

<input placeholder="e.g. 2" type="text" id="member" name="member" value="">
<button id="btn">Go</button>

<div id="colTemplate" class="col">Member Card</div>
<div id="container"></div>

<强> CSS

/* hide the template */
#colTemplate { opacity: 0; visibility: hidden; }

<强>的Javascript

$('#btn').click(() => {
  let number = document.getElementById('member').value,
      container = $('#container'),
      template = $('#colTemplate'),
      currentNumber = container.children().length;

  if (currentNumber < number) {
    // Add clones
    for (let i = 0; i < number - currentNumber; i++) {
      let clone = template.clone(true);
      clone.attr('id', null);   // Remove the id from the clone
      container.append(clone);
    }
  } else if (number < currentNumber) {
    // Remove extras
    let extras = $('#container .col');
    for (let i = currentNumber - 1; i > number - 1; i--) {
      extras.eq(i).remove();
    }
  }
});

用户指定金额时动态克隆元素？ - JavaScript + HTML

2 个答案: