Question

我正在构建一个简单的订单表格，用于在客户指定所需数量时计算每种产品的总计。

当客户更改数量时，我正在尝试从总计中添加（或减去）总计行数。

我在这里计算每一行总数：

$('#qtybox').change(function(){
    qty = $(this).val()
    if(qty < 10)
        $('#linetotal').text(qty * 925);
    else
       $('#linetotal').text(qty * 895);
 });

$('#qtybox1').change(function(){
    qty1 = $(this).val()
    if(qty1 < 10)
        $('#linetotal1').text(qty1 * 1045);
   else
      $('#linetotal1').text(qty1 * 1015);
});    

$('#qtybox2').change(function(){
    qty2 = $(this).val()
    if(qty2 < 10)
        $('#linetotal2').text(qty1 * 1045);
   else
      $('#linetotal2').text(qty1 * 1015);
});

但我仍然坚持如何将这些添加到一个总计中，并在每个数量输入字段失焦时进行更新。非常感谢任何帮助。

Answer 1

只需在三个函数中添加一行（假设总计有grandtotal）：

$('#grandtotal').text( $('#linetotal').val() + $('#linetotal1').val() + $('#linetotal2').val() )

请参阅代码中包含上述行：

$('#qtybox').change(function(){
    qty = $(this).val()
    if(qty < 10)
        $('#linetotal').text(qty * 925);
    else
       $('#linetotal').text(qty * 895);
    $('#grandtotal').text($('#linetotal').val() + $('#linetotal1').val() + $('#linetotal2').val() )

 });

$('#qtybox1').change(function(){
    qty1 = $(this).val()
    if(qty1 < 10)
        $('#linetotal1').text(qty1 * 1045);
   else
      $('#linetotal1').text(qty1 * 1015);
   $('#grandtotal').text($('#linetotal').val() + $('#linetotal1').val() + $('#linetotal2').val() )
});    

$('#qtybox2').change(function(){
    qty2 = $(this).val()
    if(qty2 < 10)
        $('#linetotal2').text(qty1 * 1045);
   else
      $('#linetotal2').text(qty1 * 1015);
    $('#grandtotal').text($('#linetotal').val() + $('#linetotal1').val() + $('#linetotal2').val() )
});

Answer 2

嗯，我建议你这样做：

1）像对qtybox，qtybox1等所有其他输入字段所做的那样，为净总文本框创建并分配id。将其初始值设置为0 2）在java脚本函数中，您计算价格并使用您在HTML页面上反映相同的id字段，它们在该脚本本身同时将这些值添加到最终总计框的值并动态更新其文本为以及你为其他文本框做的..所以它会像

在你之后if else阻止

$（ '＃ID-的-您的计盒'）文本（对值的-qty1 +值的计盒）;

注意：这些是关于如何做到这一步的一步一步的建议。一切顺利

Answer 3

将所有qtbox（即1,2,3）放在一个类中并使用.blur（）事件来更新总计。这样的事情

$('.qtbox').blur(function(){
var total=0;
$('.qtbox').each(total+$(this).val());
$('#grandtotal').text(total);
})

Answer 4

通过重构，您可以使代码更具可读性和可扩展性。将类添加到具有共同属性（如行为和外观）的元素将使使用较少数量的函数更容易控制事物。查看this jsfiddle以查看有效示例。这是javascript组件：

var BULK_CUTOFF = 10,
  REGULAR_PRICES = [985, 1045, 1045],
  BULK_PRICES = [925, 1015, 1015];

function getPrice(qty, idx) {
  if (isNaN(qty)) {
    return 0;
  }
  if (qty < BULK_CUTOFF) {
    return qty * REGULAR_PRICES[idx];
  }
  return qty * BULK_PRICES[idx];
}

function updateGrandTotal() {
  var total = 0;
  $('input.linetotal').each(function () {
    var value = parseInt($(this).val());
    if (!isNaN(value)) {
      total += value;
    }
  });
  $('#grandtotal').val(total);
}

$('input.qtybox').keyup(function () {
  var $this = $(this),
    idx = $this.index('input.qtybox'),
    qty = parseInt($this.val());
  $this.next('.linetotal').val(getPrice(qty, idx));
  updateGrandTotal();
});

使用jQuery为总计添加行总计

4 个答案: