Цена со скидкой по выбранным параметрам

Question

У меня есть несколько вариантов выбора в форме с ценами, прилагаемыми к каждому с data-price. Когда какая-либо опция изменяется или выбрана, мне нужно обновить цену, основанную на всех выбранных параметрах. Я попытался следующие:

http://jsfiddle.net/325x2d8e/

HTML:

<h3>Size</h3> 

<select class="form-control calculate" id="size" name="size"> 
    <option data-price="5.00" value="Small">Small</option> 
    <option data-price="10.00" value="Medium">Medium</option> 
    <option data-price="15.00" value="Large">Large</option> 
</select> 
<br /> 

<h3>Packing</h3> 

<select class="form-control calculate" id="packaging" name="packaging"> 
    <option data-price="0" value="Standard">Standard</option> 
    <option data-price="20.00" value="Shrink">Upgraded</option> 
</select> 
<br /> 

<h4>PRICE</h4> 

<span id="item-price">12.99</span> 

JQuery:

var basePrice = 12.99; 

$(".calculate").change(function() { 
    newPrice = basePrice; 
    $(".calculate option:selected").each(function() { 
     newPrice += $(this).data('price') 
    }); 
    $("#item-price").html(newPrice); 
}); 

Я использую JQuery 1.11.2, который сцепляет каждый параметр, как струнный вывода:

12.9910.0020.00 

, но мне нужно добавить их вместе как число и дать мне одно значение.

Если я использую JQuery 1.7.2 это дает мне правильное значение:

42.99 (12.99 + 10.00 + 20.00) 

Как я могу это сделать? Я должен придерживаться jQuery 1.11, так как некоторые из моих других скриптовых ретрансляторов на этой версии или выше

Answer 1

.data() должен разумно интерпретировать значения как числа; по какой-то причине он не делает этого с вашими десятичными числами. (Ваш jsFiddle подтверждает, что он отлично работает в jQuery 1.10.1 и 2.1.3, как ни странно.) Вы можете заставить это сделать, используя parseFloat(), чтобы преобразовать строки в числа, но тогда вы должны компенсировать обычный плавающий размер, точечные арифметические ошибки, используя toFixed(2) в конце.

var basePrice = 12.99; 
$(".calculate").change(function() { 
    newPrice = basePrice; 
    $(".calculate option:selected").each(function() { 
     newPrice += parseFloat($(this).data('price')); 
    }); 
    $("#item-price").html(newPrice.toFixed(2)); 
}); 

http://jsfiddle.net/gfch55bk/

---

Более простое решение было бы использовать целые числа вместо десятичных знаков. Тем не менее, вам все равно нужно округлить сумму с помощью .toFixed(2) в конце:

<h3>Size</h3> 
<select class="form-control calculate" id="size" name="size"> 
    <option data-price="5" value="Small">Small</option> 
    <option data-price="10" value="Medium">Medium</option> 
    <option data-price="15" value="Large">Large</option> 
</select> 
<br /> 
<h3>Packing</h3> 
<select class="form-control calculate" id="packaging" name="packaging"> 
    <option data-price="0" value="Standard">Standard</option> 
    <option data-price="20" value="Shrink">Upgraded</option> 
</select> 
<br /> 
<h4>PRICE</h4> 
<span id="item-price">12.99</span> 

JS:

var basePrice = 12.99; 
$(".calculate").change(function() { 
    newPrice = basePrice; 
    $(".calculate option:selected").each(function() { 
     newPrice += $(this).data('price') 
    }); 
    $("#item-price").html(newPrice.toFixed(2)); 
}); 

http://jsfiddle.net/8tb465g6/

Answer 2

Вы добавляете строку (которая должна быть номером, но не) к числу, приведите строку к числу, затем используется. toFixed (2), чтобы сделать его валютой.

(Demo)

var basePrice = 12.99; 
$(".calculate").change(function() { 
    newPrice = basePrice; 
    $(".calculate option:selected").each(function() { 
     newPrice += Number($(this).data('price')); 
    }); 
    $("#item-price").html(newPrice.toFixed(2)); 
}); 

Тот же сценарий в ванили JavaScript, не Jquery не требуется

(Demo)

var basePrice = 12.99; 
var itemPrice = document.getElementById('item-price'); 
(function() { 
    "use strict"; 
    var selects = document.getElementsByClassName('calculate'), select; 
    for (var i = 0; select = selects[i]; i++) { 
     select.addEventListener('change',function(){ 
      var newPrice = basePrice; 
      var selectedItems = document.querySelectorAll('.calculate option:checked'), selected; 
      for(var x = 0; selected = selectedItems[x]; x++) { 
       newPrice += Number(selected.getAttribute('data-price')); 
      } 
      itemPrice.innerHTML = newPrice.toFixed(2); 
     },false); 
    } 
})();