Создайте два новых поля ввода с входным заполнителем текста с помощью JS

Question

Создайте два новых поля ввода с входным заполнителем текста с помощью JS

0

Прямо сейчас у меня есть скрипт, который создает одно поле ввода с классом "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", а затем удалить весь этот класс?

Я просто не уверен, как это должно выглядеть.

anmaree 18 дек. 2013, в 22:13

Источник

Теги:

javascript

jquery

1 ответ

Ещё вопросы

anmaree · Answer 1 · 2013-12-18T19-17-00.000Z

Я понимаю это, создавая переменную с созданным 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);
        });
});