jQuery一堆输入值乘以动态值（另一个输入）

哈沙娜·西香卡（Harshana Nishshanka）

我有一个分组的产品，所有的组都可以在一个页面内购买。页面有多个数量输入（如6）。和另一个批量输入。它必须做的是，在设置了正常产品数量之后，这些值必须乘以批量输入值。

我的代码可以进行乘法运算，但是不像我期望的那样。它只是乘以当前输入值。我想做如下。（第一次尝试）例如：输入1值= 5，输入2值= 2，输入3值=8。批量值= 10结果应为：输入1 = 50，输入2 = 20，输入3 = 80

如果我们通过1（第二次尝试）获得批量值，则当前输入1值= 50，当前输入2值= 20，当前输入3值=80。新获得的批量值= 11结果应为：输入1 = 55，输入2 = 22，输入3 = 88

$('#multiply-value').change(function() {
        var multiplied = $('#multiply-value').val();
        
        var milti = 0;
        var value_of = 0;
        var test = 0;
        
    if (this.getAttribute('value') === this.value) {
        $(this).data('lastvalue', this.value);
    } else {
    if(this.value < $(this).data('lastvalue')){
        var old = $(this).data('lastvalue');
        console.log('decrement');
        $('.input-text.qty').each(function() {
              var i = 1;
             
             var qty_vals =  $(this);
                var old_v = $(this).data('lastvalue');
            old_test = old_v.val();
             test = qty_vals.val();
             
             var cals = 0;
             
             while(i < multiplied ){
                cals = +old_test + +cals;
                console.log(cals);

                 i++
             }
             $(this).val(cals);
             test = 0;
         });

    }
        else{
             console.log('increment');
            
            $('.input-text.qty').each(function() {
              var i = 1;
             
             var qty_vals =  $(this);
             test = qty_vals.val();
             
             var cals = 0;
             
             while(i <= multiplied ){
                cals = +test + +cals;
                console.log(cals);

                 i++
             }
             $(this).val(cals);
             test = 0;
         });

        }
//        console.log(this.value < $(this).data('lastvalue') ? 'decrement' : 'increment');
        $(this).data('lastvalue', this.value);
    }

        
         
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
   <div class=""bunch-of-inputs">
      <input type="text" name="super_group[50]" maxlength="12" value="0" title="Qty" class="input-text qty">    
      <input type="text" name="super_group[50]" maxlength="12" value="0" title="Qty" class="input-text qty">
      <input type="text" name="super_group[50]" maxlength="12" value="0" title="Qty" class="input-text qty">
   </div>
   <input id="multiply-value" type="number" value="1">
</div>

玛格迪（Amr Magdy）

为什么不将每个字段的原始值存储在另一个字段而不是value字段中？

因此html将是：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
   <div class=""bunch-of-inputs">
      <input type="text" name="super_group[50]" maxlength="12" value="5" title="Qty" class="input-text qty" data-default="5">    
      <input type="text" name="super_group[50]" maxlength="12" value="2" title="Qty" class="input-text qty" data-default="2">
      <input type="text" name="super_group[50]" maxlength="12" value="8" title="Qty" class="input-text qty" data-default="8">
   </div>
   <input id="multiply-value" type="number" value="1" >
</div>

js将是：

$('#multiply-value').on('input',function() {
    var multiplied = $('#multiply-value').val();
    $('.input-text.qty').each(function() {
        $(this).val($(this).data('default') * multiplied);
    });
})

这样我们就不需要存储先前的值，我们随时都有默认值

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。