在Javascript中计算价格值变化的订单总和答案

【问题标题】：Calculating sum of order with changing price values in Javascript在Javascript中计算价格值变化的订单总和
【发布时间】：2014-03-29 09:08:26
【问题描述】：

我正在尝试使用 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 中解析它们，但我无法弄清楚这一点。我尽力解释了这个问题，但是，如果我的解释不够充分，我会尽力回答您关于我的问题的问题。

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

【问题讨论】：

你对adding more hidden inputs with values of all discounts做了什么尝试？
一些罐头数据和简化的jsFiddle 问题将帮助您获得一些答案。您可能还想考虑Unobtrusive JavaScript

标签： javascript php html

【解决方案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

【讨论】：