Question

现在我有一个脚本可以使用类"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类？

我只是不确定这是怎么回事。

Answer 1

我通过创建一个带有创建的div的变量并在新创建的div中插入html来解决这个问题

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

使用JS创建两个带有输入占位符文本的新输入字段

1 个答案: