Question

我在表单中有多个选择选项，每个选项都附加data-price。当任何选项更改或被选中时，我需要根据所有选择更新价格。我尝试过以下方法：

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

您正在为一个数字添加一个字符串（应该是一个数字但不是数字），将该字符串强制转换为一个数字，然后使用.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));
});

vanilla 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);
    }
})();

Answer 2

.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/

根据选择的选项更新价格

2 个答案: