Question

我有一组数字字段，每个字段都有一个“产品数量”类，还有一组空div。数字字段设置为data-attr small，medium，最高可达5xl。空div设置为data-attr small，medium，并且最多也达到5xl，因为小数字字段与小div相关联，因此只有一个。

当你增加或减少小数字段内的数字时，div“small”应该在空的div之后插入并且attr很小。

当你增加或减少中号字段内的数字时，div“medium”应该在空的div之后插入attr medium ....依此类推

另外，以上所有都属于产品x容器，页面上有多个产品。

我有这个jsfiddle模拟我想要做的事情：

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

然而，现在当我向小数字字段添加/减去一个数字时，它会将div添加/减去空的small / medium 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>

JS：

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

FIDDLE

修改

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

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

FIDDLE

Answer 2

利用您的data-product-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]"));
    }
});

DEMO

编辑：

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

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

2 个答案:

DEMO

NEW - DEMO