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