javascript - 如何以动态多重形式进行自动计算？

Question

function sum()
  {
  $(document).on('keyup', "*[data-field='unit'],*[data-field='unit_price']", function(e)
    {
    var unit      = document.getElementById('unit').value;
    var unitPrice = document.getElementById('unit_price').value;
    var result    = parseInt(unit) * parseInt(unitPrice);
    if (!isNaN(result)) 
      {
      document.getElementById('amount').value = result;
      }
    });
  }

p / s：这仅在正常形式下起作用。但不是动态形式。

[编辑 ？]

$('#unit, #price').on('input',function()
  {
  let qty   = parseInt($('#unit').val())
    , price = parseFloat($('#price').val())
    ;
  $('#amount').val((qty * price ? qty * price : 0).toFixed(2));
  });

Answer 1

你可以用 jQuery Plugin 我写一个简单的

您可以对此进行测试：

$.fn.sum = function(options) {
    "use strict";
    var self = this;
    self.defaults = {
        unit          :   '[data-field="unit"]',
        unit_price    :   '[data-field="unit_price"]',
        result    		:   '[data-field="amount"]',
        onCalculate         : function(result){},
       
    };
    self.settings = $.extend({},self.defaults, options );
 
  	var unit_count = $(self).find('input'+self.settings.unit).length;
    var unit_price_count = $(self).find('input'+self.settings.unit_price).length;

    if(unit_count > 0 && unit_price_count > 0){
   
   var unit, unit_price=0, result=0;
   
   
    $($(self).find('input'+self.settings.unit_price)).bind('keyup', function(){
   
     	unit = $(this).closest('form').find('input'+self.settings.unit).val();
      unit_price = $(this).closest('form').find('input'+self.settings.unit_price).val();
      result = sum(unit, unit_price);
      self.settings.onCalculate(self, $(this), result);
      
   });
  
   $($(self).find('input'+self.settings.unit)).bind('keyup', function(){
   		unit = $(this).closest('form').find('input'+self.settings.unit).val();
      unit_price = $(this).closest('form').find('input'+self.settings.unit_price).val();
      result = sum(unit, unit_price);
      self.settings.onCalculate(self, $(this), result);
      
      
   });
   
   function sum(unit, unit_price){
  		var result = parseInt(unit) * parseInt(unit_price);
    if (!isNaN(result)) {
     return result;
    }
   }
   	
  }
    
    
}

$(document).ready(function(){
$('form').sum({
onCalculate: function(self, active, result){
	$(active).closest('form').find(self.settings.result).val(result);
	
	},
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="fff33">
<legend>
two
</legend>
<lable>unit</lable>
<input type="text" data-field='unit' id="unit22">
<br>
<lable>unit_price</lable>
<input type="text" data-field='unit_price' id="unit_price22">
<input type="text" data-field="amount" disabled>
</form>
<br>

<br><br>
<form id="fff">
<legend>
one
</legend>
<lable>unit</lable>
<input type="text" data-field='unit' id="unit">
<br>
<lable>unit_price</lable>
<input type="text" data-field='unit_price' id="unit_price">
<input type="text" data-field="amount" disabled>
</form>
<br><br>