Question

我有一个分组产品，所有组都可以在一个页面内购买。页面有多个数量输入（如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

＆＃13;

$('#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);
    }

        
         
})

＆＃13;

<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>

＆＃13;

Answer 1

/* modification start */
firsttime = true;
zero = true;
    $('#multiply-value').change(function() {

        if (firsttime && zero) {
            $('.input-text.qty').each(function() {
                this.setAttribute('value', $(this).val());

                firsttime = false;
                if($(this).val() != 0) {
                    zero = false;
                }
            });

        }
/* modification end */
        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; // modified, write this instead of $(this)
                    test = qty_vals.getAttribute('value'); // modification here

                    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);
        }

    })

第一个输入设置为各自的值属性。如果所有输入都为零，则第二个输入将作为第一个输入，依此类推。而不是test = qty_vals.value;写，test = qty_vals.getAttribute('value');来获取原始的非零值。

Answer 2

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

所以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);
    });
})

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

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

2 个答案: