Question

我有一组数字输入字段，标记为小＆amp; 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

参见 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 。原始代码中存在一些问题：

数据未初始化。修复：if( !startVal || startVal.length == 0 )
比较不是整数。修复：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();
  }
}

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

2 个答案: