Question

问候，

我正在尝试使用优秀的calculation plugin为订单定价计算器编写解决方案。我的表单每个项目有两种不同的价格，一种是10以下的数量，另一种是超过该数量的数量。

这是我到目前为止的代码：

$(document).ready(function() {

    // bind the recalc function to the quantity fields
    $("input[name^=qty_item_]").bind("keyup", recalc);
    // run the calculation function now
    recalc();

    function recalc() {

        var quantity = $("input[name^=qty_item_]").val();
        var quantity_int = parseInt(quantity_str);
        var threshold = 10;
        if (quantity_int < threshold) {
            var useprice = $("[id^=price_item_1_]");
        } else {
            var useprice = $("[id^=price_item_2_]");
        }

        $("[id^=total_item_]").calc(

            // the equation to use for the calculation
            "qty * price",
            // define the variables used in the equation, these can be a jQuery object
            {
                qty: $("input[name^=qty_item_]"),
                price: useprice
            },
            // define the formatting callback, the results of the calculation are passed to this function
            function (s){
                // return the number as a dollar amount
                return "$" + s.toFixed(2);
            },
            // define the finish callback, this runs after the calculation has been complete
            function ($this){
                // sum the total of the $("[id^=total_item]") selector
                var sum = $this.sum();
                $("#grand_total").text(
                    // round the results to 2 digits
                    "$" + sum.toFixed(2)
                );
            }

        );

    }

});

它很接近，但是useprice保持在为字段数组中的第一个项设置的值。我想我需要以某种方式在循环内部进行useprice计算，但我仍然坚持如何。

更新：Demo page here。

按照惯例，任何＆amp;所有的帮助感激不尽。 TIA：）

Answer 1

我对您的代码进行了一些更改。似乎现在工作。主要的变化是只重新计算已更改的行，而不是每次重新计算每一行。当然，总数仍然是从所有总数中计算出来的。我还使用了事件委托来最小化绑定事件处理程序，这会对大表的性能和资源使用产生影响。

jQuery(
    function($)
    {
        // threshold that defines at what quantity to use the discounted price
        var discountThreshold = 10;

        // bind the recalc function to the quantity fields
        // use event delegation to improve performance
        $("#frmOrder")
            .delegate(
                "input[name^=qty_item_]",
                "keyup",
                recalc
            );

        // run the calculation function once on every quantity input
        $("input[name^=qty_item_]").trigger("keyup");

        // recalculate only the changed row (and the grand total)
        function recalc(e) {
            // input field that triggered recalc()
            var
                $this = $(this),
                $parentRow = $this.closest('tr'),
                quantity = $this.parseNumber()[0],
                $usePrice = ((discountThreshold <= quantity) ? $("[id^=price_item_2_]", $parentRow) : $("[id^=price_item_1_]", $parentRow)) || 0;

            // recalculate the row price
            $("[id^=total_item_]", $parentRow).calc(
                // the equation to use for the calculation
                "qty * price",
                // define the variables used in the equation, these can be a jQuery object
                {
                    qty: $this,
                    price: $usePrice
                },
                // define the formatting callback, the results of the calculation are passed to this function
                function (s){
                    // return the number as a dollar amount
                    return "$" + s.toFixed(2);
                },
                // define the finish callback, this runs after the calculation has been complete
                function ($that){
                    // sum the total of the $("[id^=total_item]") selector
                    var sum = $("[id^=total_item_]").sum();
                    $("#grand_total").text(
                        // round the results to 2 digits
                        "$" + sum.toFixed(2)
                    );
                }
            );
        }
    }
);

使用可变定价的jQuery Calculation插件订购表单

1 个答案: