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

上

在Javascript中计算订单总和与价格变化值

1 个答案: