0

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

当客户更改数量时，我试图让表单从总计中添加（或减去）行总计。

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

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

但是我坚持如何将这些添加到总计中并在每个数量输入字段都失焦时对其进行更新。任何帮助是极大的赞赏。

4

4 回答 4

0

只需在三个函数中添加一行（假设总计有 id 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() )
});
于 2013-01-13T06:34:03.413 回答
0

嗯，我建议你这样做：

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

在你的 if else 块之后

$('#id-of-your-total-box').text(value-of-qty1+value-of-total-box);

注意：这些是我关于如何做的一步一步的建议.. 祝你好运

于 2013-01-13T06:35:48.543 回答
0

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

$('.qtbox').blur(function(){
var total=0;
$('.qtbox').each(total+$(this).val());
$('#grandtotal').text(total);
})
于 2013-01-13T06:40:45.517 回答
0

您可以通过重构代码使代码更具可读性和可扩展性。向具有共同属性（如行为和外观）的元素添加类将使使用较少数量的函数更容易控制事物。查看这个 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();
});
于 2013-01-13T08:06:45.303 回答