使用Javascript计算订单总额并更改价格值

Question

我正尝试使用Javascript计算一个大表单中的订单总和。每种产品都有自己的价格，但是，有些产品的价格更高。每种产品都有自己的价格，但如果客户订购的产品数量较多，价格将下降到数据库表中指定的值。

为了简化，一个项目的购物形式看起来像这样。

<input name="id" value="'.$id.'" type="hidden"> 
<input name="price_'.$id.'" value="'.$price.'" type="hidden"> 
<input name="quantity_'.$id.'" type="text" onchange="calculateTotal()"> 

我有折扣表：itemId，minimumQuantity，priceAfterDiscount。一件物品可以有多个折扣。 MySQL查询与LEFT JOIN的Items和Discounts表一起使用。

calculateTotal()计算每次输入更改后的订单总数。

我想要做的是检查某个产品的数量是否大于折扣所需的价值，如果是这样，我想将价格从物品的正常价格改为打折的一个。然后，calculateTotal()将使用该价格并更新总数。

要做到这一点，我想我可以做一些事情，比如增加更多隐藏的输入和所有折扣的值。该功能将检查是否存在与每件物品相关的折扣，如果是，则会检查数量是否大于requiredQuantity，如果满足此条件，则会更新价格隐藏输入的值。请记住，可以有多个折扣连接到一个项目 - 该功能应该找到满足requiredQuantity的最低价格。

我想要做到这一点 - 创建隐藏的输入，并以某种方式解析它们在JavaScript中，但我只是无法弄清楚这一点。我尽力解释这个问题，但是，如果我的解释不够充分，我会尽力回答你关于我的问题的问题。

我希望你能够也愿意帮助我。提前感谢您的帮助。

Answer 1

也许就像这个例子。

CSS

.itemLabel, .currentPrice, .subTotal { 
    display: inline-block; 
    width: 40px; 
} 
#myTotal { 
    border:2px solid red; 
} 

HTML

<fieldset id="myInputs"></fieldset> 
<div id="myTotal"></div> 

的Javascript

var myInputs = document.getElementById('myInputs'), 
    myTotal = document.getElementById('myTotal'), 
    order = { 
     total: 0 
    }, 
    items = { 
     foo: { 
      1: 0.5, 
      100: 0.25 
     }, 
     bar: { 
      1: 1, 
      100: 0.5 
     } 
    }, 
    totalNode; 

function calculateTotal() { 
    var newTotalNode; 

    Object.keys(order).filter(function (key) { 
     return key !== 'total'; 
    }).reduce(function (acc, key) { 
     order.total = acc + order[key].subTotal; 

     return order.total; 
    }, 0); 

    newTotalNode = document.createTextNode(order.total.toFixed(2)); 
    if (totalNode) { 
     myTotal.replaceChild(newTotalNode, totalNode); 
     totalNode = newTotalNode; 
    } else { 
     totalNode = myTotal.appendChild(newTotalNode); 
    } 

    console.log(JSON.stringify(order)); 
} 

calculateTotal(); 
Object.keys(items).forEach(function (key) { 
    var div = document.createElement('div'), 
     label = document.createElement('label'), 
     price = document.createElement('span'), 
     input = document.createElement('input'), 
     subtotal = document.createElement('span'), 
     priceNode, 
     subTotalNode; 

    order[key] = { 
     quantity: 0, 
     subTotal: 0, 
     price: items[key]['1'] 
    }; 

    priceNode = document.createTextNode(order[key].price.toFixed(2)); 
    subTotalNode = document.createTextNode(order[key].subTotal.toFixed(2)); 
    label.className = 'itemLabel'; 
    label.setAttribute("for", key); 
    label.appendChild(document.createTextNode(key)); 

    price.className = 'currentPrice'; 
    price.id = key + 'CurrentPrice'; 
    price.appendChild(priceNode); 

    input.id = key; 
    input.name = 'myFormGroup'; 
    input.type = 'text'; 
    input.addEventListener('change', (function (key, order, priceNode, subTotalNode) { 
     return function() { 
      var value = +(this.value), 
       newPriceNode, 
       newSubTotalNode; 

      Object.keys(items[key]).sort(function (a, b) { 
       return b - a; 
      }).some(function (quantity) { 
       if (value >= quantity) { 
        order.price = items[key][quantity]; 
        newPriceNode = document.createTextNode(order.price.toFixed(2)); 
        priceNode.parentNode.replaceChild(newPriceNode, priceNode); 
        priceNode = newPriceNode; 

        return true; 
       } 

       return false; 
      }); 

      order.subTotal = order.price * value; 
      newSubTotalNode = document.createTextNode(order.subTotal.toFixed(2)); 
      subTotalNode.parentNode.replaceChild(newSubTotalNode, subTotalNode); 
      subTotalNode = newSubTotalNode; 
      calculateTotal(); 
     }; 
    }(key, order[key], priceNode, subTotalNode)), false); 

    subtotal.className = 'subTotal'; 
    subtotal.id = key + 'SubTotal'; 
    subtotal.appendChild(subTotalNode); 

    div.appendChild(label); 
    div.appendChild(price); 
    div.appendChild(input); 
    div.appendChild(subtotal); 
    myInputs.appendChild(div); 
}); 

在jsFiddle