Форма заказа с плагином jQuery Calculation с использованием переменной цены

Question

Привет,

Я пытаюсь написать решение для калькулятора цен формы заказа, используя отличный плагин расчета В моей форме есть две разные цены для каждой позиции: одна для количеств меньше 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 остается на значении, для которого оно установлено для первого элемента в массиве полей. Я думаю, что мне нужно каким-то образом привести расчет цены использования внутри цикла, но я застрял в том, как.

ОБНОВЛЕНИЕ: Демонстрационная страница здесь .

Как обычно, любая и вся помощь с благодарностью получена. 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)
                    );
                }
            );
        }
    }
);