Javascript 根据数字输入中的值添加div

我有一组数字字段，每个字段都有一个类“product quantity”，还有一组空div。数字字段设置为数据属性small、medium，最大为5xl。空div设置为data attr small、medium，并上升到5xl，因为小数字字段与小div关联，因此为1

当您增加或减少小数字字段中的数字时，应在空div后面插入一个div“small”，并带有attr small

当您增加或减少介质编号字段中的编号时，应在带有attr介质的空div之后插入一个div“medium”。。。。等等

此外，以上所有内容都属于product x容器，并且一个页面上有多个产品

我有一个JSFIDLE，它模拟了我要做的事情：

但是，现在当我在小数值字段中加/减一个数值时，它会在空的小/中div以及两个乘积中加/减一个div。介质也一样

我很难将哪个数字字段与哪个空div、哪个产品相关联

html:

<div id="product-1">    
   <div class="size-field">

      <div id="size-label">
      s
      </div>
         <div class="number-input">
             <input id="Small" class="product-quantity" type="number" name="Small" min="0" 
             max="9999" data-product-id="1">
             </input>
         </div>
   </div>
      <div id="size-label">
      m
      </div>
         <div class="number-input">
            <input id="Medium" class="product-quantity" type="number" name="Medium" 
            min="0" max="9999" data-product-id="1">
            </input>
         </div>

     <div class="name-number-header"><h5>HEADER<h5></div>
         <div class="name-number-field-container" data-size="Small">small:
         </div>
         <div class="name-number-field-container" data-size="Medium">medium:
         </div>
    </div>

<br clear="all">

<div id="product-2">    
   <div class="size-field">

      <div id="size-label">
      s
      </div>
         <div class="number-input">
             <input id="Small" class="product-quantity" type="number" name="Small" min="0" 
             max="9999" data-product-id="2">
             </input>
         </div>
   </div>
      <div id="size-label">
      m
      </div>
         <div class="number-input">
            <input id="Medium" class="product-quantity" type="number" name="Medium" 
            min="0" max="9999" data-product-id="2">
            </input>
         </div>

     <div class="name-number-header"><h5>HEADER<h5></div>
         <div class="name-number-field-container" data-size="Small">small:
         </div>
         <div class="name-number-field-container" data-size="Medium">medium:
         </div>
    </div>

s
M
标题
小型：
中等：


s
M
标题
小型：
中等：

js:

$（'.product quantity'）。在（'change'，function（）上{
$（'.name-number字段'）.remove（）；
var val=$（this.val（）；
for（var i=0；i

$（'.product quantity'）。关于（'change'，函数（）{
var val=$（this.val（），
ele=$（this）.closest（'[id^=“product”]'）.find（'[data size=“'+this.name+']”）；
ele.nextUntil（“[数据大小]”）.remove（）；
for（var i=0；i

编辑：

根据这些评论，您真正想要做的是，如果值增加，则添加一个，如果值减少，则删除最后一个，因此方法会有所不同：

$('.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) {
        $('<div/>', {
            'class': 'name-number-field'
        }).insertAfter(ele);
    }else {
        $('.name-number-field', ele.parent()).last().remove();
    }

    $(this).data('val', this.value);
});

$（'.product quantity'）。每个（函数（）{
$（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（公司）{
$('', {
“类”：“名称编号字段”
}).插入符（ele）；
}否则{
$（'.name-number字段'，ele.parent（））.last（）.remove（）；
}
$（this.data（'val'，this.value））；
});

---

利用您的

数据产品id

，钩住文本框的父项并瞄准所需的元素

试试这个

$('.product-quantity').on('change',function(){
    $('.name-number-field').remove();
            var val = $(this).val();

    for (var i = 0; i < parseInt(val); i++){
        $('<div/>',{'class':'name-number-field'})
        .insertAfter($(this).parents('#product-' + $(this).data('product-id')).find("[data-size]"));
    }
});

$（'.product quantity'）。在（'change'，function（）上{
$（'.name-number字段'）.remove（）；
var val=$（this.val（）；
for（var i=0；i

编辑：

$（'.product quantity'）。在（'change'，function（）上{
$（'.name-number字段'）.remove（）；
var val=$（this.val（）；
for（var i=0；i

---

你必须先关闭H5标记。这非常接近，但是当一个数字被减去时，它不会删除它们。我将删除参数上移了一行，它就工作了！是的，你试过小提琴了吗？ele.nextUntil删除第一个或最后一个红色div还是随机的？我希望它删除最后一个，它删除了所有这些，并再次运行循环，再次插入它们。你就是这样做的，所以我假设这就是你想要的。小号字段在小号空div和中号空div之后添加一个div。小号字段只需要与小号空div关联，中号字段需要与中号空div关联

$('.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) {
        $('<div/>', {
            'class': 'name-number-field'
        }).insertAfter(ele);
    }else {
        $('.name-number-field', ele.parent()).last().remove();
    }

    $(this).data('val', this.value);
});

$('.product-quantity').on('change',function(){
    $('.name-number-field').remove();
            var val = $(this).val();

    for (var i = 0; i < parseInt(val); i++){
        $('<div/>',{'class':'name-number-field'})
        .insertAfter($(this).parents('#product-' + $(this).data('product-id')).find("[data-size]"));
    }
});

$('.product-quantity').on('change',function(){
    $('.name-number-field').remove();
            var val = $(this).val();

    for (var i = 0; i < parseInt(val); i++){
        $('<div/>',{'class':'name-number-field'})
        .insertAfter($(this).parents('#product-' + $(this).data('product-id')).find("[data-size='"+ $(this).attr('name') +"'][data-size]"));
    }
});