数字字段中的关联号与新创建的js div's的数量

Question

我有一组数字输入字段，标有中小型.，还有一组div，它的标签是中小型。当您向小数字输入字段添加一个数字时，一个文本输入insertsAfter标记为小的div。当您从小数字输入字段中减去一个数字时，将删除最近添加的文本输入字段。添加和删除文本输入是列表中的最后一个。同样的情况适用于中号字段和媒体标签/文本字段。

请参阅JSFiddle以获得参考http://jsfiddle.net/7PhJZ/53/

现在，当我单击“数字”字段上的“向上”或“向下”按钮时，我的脚本工作正常。但是，当我输入(例如，在small number字段中输入5)时，只有一个新的div/name输入字段出现在label small下面。当我使用箭头和输入一个数字时，我需要生成这些输入字段的加减。因此，当我键入"5“时，名称/文本输入字段应该出现在关联的标签下。

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>
<br clear="all">

<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').each(function () {
    $(this).data('val', this.value);
}).on('change', function () {
    var val = $(this).val(),
        old = $(this).data('val'),
        input = $('<div/>', {'class': 'name-number-field'}).html('<input 
             class="name-field" name="name" placeholder="Name" type="text">'),
        ele = $(this).closest('[id^="product"]').find('[data-size="' + this.name + '"]'),
        inc = val >= old;

    if (inc) {
        $(input).insertAfter(ele.nextUntil(':not(.name-number-field)').last()
        .length ? ele.nextUntil(':not(.name-number-field)').last() : ele);
    } else {
        ele.nextUntil(':not(.name-number-field)').last().remove();
    }

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

Answer 1

请参阅这把小提琴

您需要在创建元素的代码之外放置一个for循环：

  }).on('change', function () {
         var val = $(this).val(),
        old = $(this).data('val');
  for (var count=0; count<Math.abs(val-old) ; count++)
  {
       ...
  }

基于注释的更新

见这把更新的小提琴。在原始代码中存在一些问题：

1. 数据没有初始化。Fix：if( !startVal || startVal.length == 0 )
2. 这种比较不是与国家统计局的比较。Fix：inc = (parseInt(val) >= parseInt(old));

Answer 2

您的代码只检查新旧之间的变化方向，而不是有多大的差异。如果是增加(任意数量)，则添加一个元素；如果是减少，则删除一个元素。

您需要将该代码包装在一个循环中，并执行它的次数与旧代码和新代码的区别一样多。

for (var i=0 ; i<Math.abs(val-old) ; i++) {
  if (inc) {
    $(input).insertAfter(ele.nextUntil(':not(.name-number-field)').last()
    .length ? ele.nextUntil(':not(.name-number-field)').last() : ele);
  } else {
    ele.nextUntil(':not(.name-number-field)').last().remove();
  }
}