Рассчитать стоимость, исходя из изменения количества вводимых чисел (количества)

Question

У меня есть несколько вариантов, которые заполняют форму продуктами и ценами. Затем я рассчитываю полную стоимость всех продуктов и работает нормально, но есть количество полей ввода в форме для количества, и я не могу рассчитать цену, основанную на количестве продуктов.

Вот скрипка: http://jsfiddle.net/fpm971fb/

Я пытался с этим кодом:

jQuery('input.selected-product-quantity').bind('focus blur select change click dblclick mousedown mouseup mouseover mousemove mouseout keypress keydown keyup', function(){ 
     pr=jQuery('.priceClass').text(); 
     nr=jQuery('.selected-product-quantity').val(); 
     calc=pr*nr; 
     console.log(pr+"*"+nr); 
     jQuery('.priceClass').html(calc); 
}); 

Но когда этот код вводятся внутрь по функции изменения (см в скрипке) он показывает огромное количество, как это добавляет один к другой. А когда наружу эту функцию, ничего не происходит.
Как правильно рассчитать полную стоимость с количеством?

Answer 1

Попробуйте поместить следующий код в функции с именем TotalPrice() ,

function TotalPrice(){ 
    var sum = 0; 
    jQuery('.priceClass').each(function() { 
    sum += Number(jQuery(this).text() * parseInt($(this).next().next().children("input").val())); 
     console.log(sum); 
    }); 
    jQuery(".fullPrice").html("<b>Full price: </b>" + sum); 
} 

и затем вызвать его изнутри смены элемента выбора (если эта функция была предварительно закодирована).

Теперь, когда элементы динамически загружаются, перед вами возникает проблема связать события с ними. Поэтому я предлагаю быть немного сложным в этом. Попробуйте этот способ,

$("body").on("keyup", function(){ 
    TotalPrice(); 
}); 

При изменении тела (который является уже загружен элемент в DOM) вы называете функцию TotalPrice() и рассчитать общую стоимость. Думаю, это не лучшее решение. Поэтому я ценю предложение.

jsFiddle

Answer 2

Попробуйте:

$('input.selected-product-quantity').change(function(){ 
    var quantity = $(this).val(); 
    var price = $('.priceClass').text(); 
    var calprice = parseInt(price) * parseInt(quantity); 
    $('.priceClass').text(calprice); 
}); 

Answer 3

Попробуйте преобразовать ваши входные значения на номер перед любым расчетом:

$('input.selected-product-quantity').on('change', function(){ 
    var pr = Number($('.priceClass').text()); 
    var nr = Number($('.selected-product-quantity').val()); 
    var calc = pr * nr; 
    console.log(pr+"*"+nr); 
    $('.priceClass').html(calc); 
});