Прямо сейчас у меня есть скрипт, который создает одно поле ввода с классом "name-number-field"
.
Однако я хочу, чтобы скрипт создавал два поля ввода, которые имеют display: inline
и оба поля ввода имеют текст-заполнитель внутри полей.
Вот что у меня есть сейчас:
$(document).ready(function() {
$('.product-quantity').each(function() {
$(this).data('val', this.value);
}).on('change', function () {
var val = $(this).val(),
old = $(this).data('val'),
ele = $(this).closest('[id^="product"]').find
('[data-size="'+this.name+'"]'),
inc = val >= old;
if (inc) {
$('<input/>', {'class': 'name-number-field',
'type':'text'}).insertAfter(ele);
}else {
$('.name-number-field', ele.parent()).first().remove();
}
$(this).data('val', this.value);
});
});
Я попытался:
$('<input/> <input/>', {'class': 'name-number-field', 'type': 'text'}).insertAfter(ele);
он создает два поля, но сценарий, который у меня есть, не удаляет их, когда я добавляю второй ввод. Я предполагаю, потому что второй вход не имеет класса "name-number-field"
.
Может быть, я мог бы включить оба входа внутри div-класса "name-number-field"
, а затем удалить весь этот класс?
Я просто не уверен, как это должно выглядеть.
Я понимаю это, создавая переменную с созданным div и вставляя html внутри этого вновь созданного div
$(document).ready(function() {
$('.product-quantity').each(function() {
$(this).data('val', this.value);
}).on('change', function () {
var val = $(this).val(),
old = $(this).data('val'),
ele = $(this).closest('[id^="product"]').find('[data-
size="'+this.name+'"]'),
input = $('<div/> ', {'class': 'name-number-field', 'type':
'text'}).html('<input class="field" type="text"><input class="field" type="text">'),
inc = val >= old;
if (inc) {
$(input).insertAfter(ele);
}else {
$('.name-number-field', ele.parent()).first().remove();
}
$(this).data('val', this.value);
});
});