javascript - 将数字字段中的数字与新创建的 js div 的数量相关联

Question

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

请引用 JSFiddle http://jsfiddle.net/7PhJZ/53/

现在，当我单击数字字段上的向上或向下按钮时，我的脚本可以正常工作。但是当我在小数字字段中输入例如 5 时，只有一个新的 div/name 输入字段出现在标签 small 下。当我使用箭头和输入数字时，我需要生成这些输入字段的加法和减法。因此，当我输入“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

参见 this fiddle

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

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

根据评论更新

参见 this updated fiddle 。原始代码中存在一些问题:

1. 数据未初始化。修复:if( !startVal || startVal.length == 0 )
2. 比较的不是整数。修复:inc = (parseInt(val) >= parseInt(old));