javascript - 如何使用 jQuery 计算小计和总计？

Question

我有一张表格，需要计算 2 个小计中的项目，并将这些小计总计为一个总数。

我只能得到 subTotal1 和 subTotal2 的总和，但总计计算失败，因为它，我不知道计算平均值(不是公式，而是 JavaScript 代码)。

这是我的代码:

$(document).on("change", ".qty1", function() {
  var sum = 0;
  $(".qty1").each(function() {
    sum += +$(this).val();
  });
  $(".subTotal1").val(sum);
});
$(document).on("change", ".qty2", function() {
  var sum = 0;
  $(".qty2").each(function() {
    sum += +$(this).val();
  });
  $(".subTotal2").val(sum);
});
// Doesn't work
$(document).on("change", ".subTotal", function() {
  var sum = 0;
  $(".subTotal").each(function() {
    sum += +$(this).val();
  });
  $(".total").val(sum / 2);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="./">
  Shoes 1: <input type="number" name="shoes1" class="qty1"><br> 
  Shoes 2: <input type="number" name="shoes2" class="qty1"><br> 
  Shoes 3: <input type="number" name="shoes3" class="qty1"><br> 
  Sub total: <input type="number" name="subTotal1" class="subTotal1 subTotal"><br><br> 
  Sandals 1: <input type="number" name="sandals1" class="qty2"><br> 
  Sandals 2: <input type="number" name="sandals2" class="qty2"><br> 
  Sandals 3: <input type="number" name="sandals3" class="qty2"><br> 
  Sub total: <input type="number" name="subTotal2" class="subTotal2 subTotal"><br><br> 
  Total: <input type="number" name="total" class="total"><br><br> 
  Mean (50% Shoes + 50% Sandals ) / 2: <input type="number" name="mean" class="mean"><br>
  <input type="submit" value="Submit">
</form>

Answer 1

该文档仅检测用户由 javascript 所做的更改，否则您将经历一些无限循环。因此，只需在计算完小计后调用该函数即可

	$(document).on("change", ".qty1", function() {
	    var sum = 0;
	    $(".qty1").each(function(){
	        sum += +$(this).val();
	    });
	    $(".subTotal1").val(sum);
            calcTotal();
	});
	$(document).on("change", ".qty2", function() {
	    var sum = 0;
	    $(".qty2").each(function(){
	        sum += +$(this).val();
	    });
	    $(".subTotal2").val(sum);
            calcTotal();
	});
	// Does work
	function calcTotal() {
	    var sum = 0;
	    $(".subTotal").each(function(){
	        sum += +$(this).val();
	    });
	    $(".total").val(sum);
            $(".mean").val(sum/2);
	};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="./">
 		Shoes 1: <input type="number" name="shoes1" class="qty1"><br>
	    Shoes 2: <input type="number" name="shoes2" class="qty1"><br>
	    Shoes 3: <input type="number" name="shoes3" class="qty1"><br>
	    Sub total: <input type="number" name="subTotal1" class="subTotal1 subTotal"><br>
	    <br>
	    Sandals 1: <input type="number" name="sandals1" class="qty2"><br>
	    Sandals 2: <input type="number" name="sandals2" class="qty2"><br>
	    Sandals 3: <input type="number" name="sandals3" class="qty2"><br>
	    Sub total: <input type="number" name="subTotal2" class="subTotal2 subTotal"><br>
	    <br>
	    Total: <input type="number" name="total" class="total"><br>
	    <br>
	    Mean (50% Shoes + 50% Sandals ) / 2: <input type="number" name="mean" class="mean">
	    <br>
		<input type="submit" value="Submit">
 	</form>