jquery函数中的小计(.click问题?

Question

此函数仅对我使用带有单选按钮的 .hasVal 类时单击的最后一个值进行小计。有什么想法吗？

更新：这是jsfiddle链接：http://jsfiddle.net/SUKsM/4/

本质上，我的HTML表单有一个带有值的字段集：

<fieldset id="breadOptions" class="hidden">
    <legend>Select one</legend>
    <input type="radio" name="breadType" id="breadWhite" class="hasVal" value=".5,260" /> White (260 calories)<br />
    <input type="radio" name="breadType" id="breadWheat" class="hasVal" value=".5,360" /> Wheat (360 calories)<br />
</fieldset>​

下面是脚本：

$(function () {
    var basePrice = 3;
    var totalCal = 0;
    var taxRate = .07;
    $('#total').text(basePrice.toFixed(2));
    $('#sub').text(basePrice.toFixed(2));
    $('#cal').text(totalCal);
    $('#tax').text((taxRate * 100).toFixed(2));
    $('.hasVal').click(function () {
        var price = 0;
        var totalCal = 0;
        var tar = event.currentTarget;
        var optArr = tar.value.split(','); //cost,calorie
        price += parseFloat(optArr[0]);
        totalCal += parseInt(optArr[1]);
        $(':checked').each(function () {
            totalPrice = (price + basePrice);
        });
        $('#sub').text(totalPrice.toFixed(2));
        $('#cal').text(totalCal);
        totalTax = totalPrice + (totalPrice * taxRate);
        $('#total').text(totalTax.toFixed(2));
    });
});

Answer 1

如果我理解正确，您的抱怨是当您单击单选按钮时，您只会显示反映您最近单击的值的小计。这是对的吗？如果您发布您正在使用的其余HTML code会有所帮助（我假设三明治的成分不仅仅是面包）。

现在，我已经将您的代码放入 jsFiddle 中：http://jsfiddle.net/devlshone/SUKsM/进行了一些更改。

一旦您解释了更多内容并提供了更多HTML code，我很乐意为您提供进一步的帮助。

Answer 2

您可以使用HTML5数据属性来表示价格和卡路里，如下所示：

<input type="radio" ... data-cost=".5" data-cal="260" value="white" /> White (260 calories)
<input type="radio" ... data-cost=".5" data-cal="360" value="wheat" /> Wheat (360 calories)

当您对总价格和卡路里求和时，像这样迭代所有选定的单选按钮，而不仅仅是当前按钮：

$('input:radio:checked').each(function() {
    var input = $(this);
    price += parseFloat(input.attr('data-cost'), 10);
    cal += parseInt(input.attr('data-cal'), 10);
});

下面是一个工作示例： http://jsfiddle.net/ncCgu/

如果您无法使用 HTML5 数据属性，以下示例如下： http://jsfiddle.net/z55rd/