Динамически клонировать элемент, когда пользователь указывает сумму? - JavaScript HTML

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Возможно ли, чтобы пользователь ввел в <input> поле количество элемента, который он хотел бы клонировать, и добавил на страницу?

Проблема в том, что когда пользователь в данный момент указывает количество клонируемых элементов, количество элементов больше, чем количество элементов, которые требуется клонировать при втором нажатии. Кроме того, можно ли скрыть исходный элемент для клонирования в HTML и CSS? Пожалуйста, найдите прилагаемый код ниже и ссылку JsFiddle.

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

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

1. Итак, вы хотите скрыть ранее клонированные элементы?

2. Привет, с помощью кода Javascript он в настоящее время клонирует существующий элемент путем идентификации класса и клонирования. Поэтому я хочу скрыть только исходный элемент, из которого копируется Javascript.

Ответ №1:

Небольшая настройка HTML и Javascript.

Добавлен пример кода jsfiddle, приведенный ниже.

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();
    }
  }
});

1. Привет, спасибо за вклад в этот вопрос. Однако проблема со следующим кодом заключается в том, что когда пользователь пытается динамически добавить больше элементов во второй раз, динамических элементов становится больше, чем указано изначально. Возможно ли решить эти проблемы? Спасибо!

2. @Dave, я обновил ответ выше. У него было несколько незначительных логических проблем. Теперь они исправлены. Я также добавил ссылку на jsfiddle, чтобы вы могли видеть, как там работает код.

Ответ №2:

Используйте :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/