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

Question

我有一组数字输入字段,标记为small&medium ..,以及一组标签为small和medium的div.当您向小数字输入字段添加数字时,文本输入插入后标记为小的div.从小数字输入字段中减去数字时,将删除最近添加的文本输入字段.添加和删​​除文本输入是列表中的最后一个.同样的事情适用于中号字段和中标签/文本字段

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

现在,当我单击数字字段上的向上或向下按钮时,我的脚本正常工作.但是当我输入小数字字段中的例如5时,标签下只显示一个新的div/name输入字段.当我使用箭头和输入数字时,我需要添加和减去这些输入字段.因此,当我输入"5"时,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>

js:

$('.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. 数据未初始化。使固定：if( !startVal || startVal.length == 0 )
2. 比较不是与整数。使固定：inc = (parseInt(val) >= parseInt(old));