获得增量输入微调器+& - 更新标签文本字段

时间:2017-07-18 10:17:51

标签: javascript jquery input label

我的javascript不是最好的。我在这里以计算器的形式提供了一些代码:

https://jsfiddle.net/yadL05aL/

我的javascript:

// Get a list of your products and pop them into a dropdownlist
        function GetProducts() {
            var products = V12.getFinanceProducts();
            var ddlProducts = document.getElementById('productsList');
            for (var i = 0; i < products.length; i++) {
                var newItem = new Option(products[i].name, products[i].productId);
                ddlProducts.appendChild(newItem);
            }
        }
        // Get details of repayments for the product selected
        function CalculateRepayments() {
            var productId = $('#productsList').val(); // selected product
            var financeProduct = V12.getFinanceProduct(productId); // get the object
            var cashPrice = $('#cashPrice').val();
            var depositFactor = $('#deposit').val();
            var deposit = cashPrice * (depositFactor / 100);
            var payments = V12.calculate(financeProduct, cashPrice, deposit);
            PopulateDescription(payments);
        }

        function UpdateLoanInfo() {
            $('#cashPrice').val($('#cpRange').val());
            $('#deposit').val($('#depRange').val());
            CalculateRepayments();
        }

        // Show repayment plan details in the description
        function PopulateDescription(payments) {
            $('#lblFinalPayment').html('');

            $('#lblDeposit').html('£' + payments.deposit);
            $('#lblInitPayments').html('£' + payments.initialPayments);
            $('#lblTotalRepayable').html('£' + payments.amountPayable);
            $('#lblInterest').html(payments.apr + '%');

            if (payments.initialPayments != payments.finalPayment && payments.finalPayment > 0) {
                $('#lblMonths').html(payments.months - 1);
                $('#lblFinalPayment').html(' and a final payment of £' + payments.finalPayment);
            } else {
                $('#lblMonths').html(payments.months);
            }
        }

        // Firing this will loop through your V12 products and grab the product with the lowest
        // possible monthly payments.
        function GetLowestMonthlyPayments() {
            var products = V12.getFinanceProducts();

            var lowestMonthlyPayment = 0;
            var lowestMonthlyPaymentProductId = 0;

            for (var i = 0; i < products.length - 1; i++) {
                var product = V12.getFinanceProduct(products[i].productId);
                var cashPrice = $('#cashPrice').val();
                var depositFactor = $('#deposit').val();
                var deposit = cashPrice * (depositFactor / 100);
                var payments = V12.calculate(product, cashPrice, deposit);
                var monthlyPayment = payments.initialPayments;

                if (parseFloat(lowestMonthlyPayment) > parseFloat(monthlyPayment) || lowestMonthlyPayment == 0) {
                    lowestMonthlyPayment = payments.initialPayments;
                    lowestMonthlyPaymentProductId = product.productId;
                }
            }
            $("#productsList").val(lowestMonthlyPaymentProductId);
            CalculateRepayments();
        }

        // Ready up our events
        (function ($) {
            GetProducts();
            CalculateRepayments();
            $('#productsList').on('change', function () {
                CalculateRepayments();
            });
            $('#cpRange, #depRange').on("input", function () {
                UpdateLoanInfo();
            });
            $('#lowestMonthlyPayments').click(function () {
                GetLowestMonthlyPayments();
            });
            $('#cashPrice, #deposit').keyup(function () {
                var cp = $('#cashPrice').val();
                var dep = $('#deposit').val();        
                $('#cpRange').val(cp);
                $('#depRange').val(dep);
                CalculateRepayments();
            });

         //spinner//
         $('<div class="quantity-nav"><div class="quantity-button quantity-up">+</div><div class="quantity-button quantity-down">-</div></div>').insertAfter('.quantity input');
            $('.quantity').each(function() {
              var spinner = jQuery(this),
                input = spinner.find('input[type="number"]'),
                btnUp = spinner.find('.quantity-up'),
                btnDown = spinner.find('.quantity-down'),
                min = input.attr('min'),
                max = input.attr('max');

              btnUp.click(function() {
                var oldValue = parseFloat(input.val());
                if (oldValue >= max) {
                  var newVal = oldValue;
                } else {
                  var newVal = oldValue + 100;
                }
                spinner.find("input").val(newVal);
                spinner.find("#cpRange").val(cp);
                spinner.find("#depRange").val(dep);
                spinner.find("input, #cashPrice").trigger("change");
              });

              btnDown.click(function() {
                var oldValue = parseFloat(input.val());
                if (oldValue <= min) {
                  var newVal = oldValue;
                } else {
                  var newVal = oldValue - 100;
                }
                spinner.find("input").val(newVal);
                spinner.find("input").trigger("change");
              });
            });

        })(jQuery);

我想要实现的是当您点击现金价格输入中的加号和减号按钮时,底部标签反映了存款/每月还款的减少或增量变化&amp;四月

任何人都可以指出我正确的方向吗?

亲切的问候 罗比

0 个答案:

没有答案