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

Question

我有一组数字字段，每个字段都有一个类“”和一组空的div。数字字段是用一个数据设置的--攻击大小，中等，最高可达5 5xl。空的div是用一个数据设置的--攻击小的、中等的，并且上升到5xl，因为小数字段与小的div等相关。

当您在小数字字段中增加或减少数字时，应该在空div之后插入一个div“小”和attr小。

当您增加或减少中间数字字段中的数字时，应在空div之后插入div " medium“和attr媒体.诸若此类

此外，上述所有内容都属于产品x容器，一个页面上有多个产品。

我有一个模拟我想要做的事情的小提琴：

http://jsfiddle.net/7PhJZ/25/

但是，现在，当我向小数字段添加/减去一个数字时，它会将一个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>

联署材料：

$('.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($("[data-size]"));
    }
});

Answer 1

$('.product-quantity').on('change', function () {
    var val = $(this).val(),
        ele = $(this).closest('[id^="product"]').find('[data-size="'+this.name+'"]');

    ele.nextUntil('[data-size]').remove();

    for (var i = 0; i < parseInt(val); i++) {
        $('<div/>', {
            'class': 'name-number-field'
        }).insertAfter(ele);
    }
});

小提琴

编辑：

根据注释，您真正要做的只是在值增加时添加一个，如果值减少则删除最后一个，为此，方法可能会有所不同：

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

小提琴

Answer 2

利用您的data-product-id并挂钩textbox的父元素并针对所需的元素。

尝尝这个,

$('.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]"));
    }
});

新演示