Question

我正在创建一个自定义计算机构建，但我很难更新总价格。

用户选择他们想要的处理器，并使用data-price添加到价格上。

这是我的HTML

<div class="process_intel_options" style="display:block">
            <label class="option">
                <input type="radio" name="processor_options" value="i7950" data-price="155"  id="intel_options_0" checked="checked" />
                Intel Core i7 950 3.06Ghz
                </label>
            <br />
            <label class="option">
                <input type="radio" name="processor_options" value="i7960" data-price="250" id="intel_options_1" />
                Intel Core i7 960 3.20Ghz
                </label>
        </div>

        <div class="process_amd_options" style="display:none">
            <label class="option">
                <input type="radio" name="processor_options" value="i7950" data-price="150" id="amd_options_0" />
                AMD Core i7 950 3.06Ghz
                </label>
            <br />
            <label class="option">
                <input type="radio" name="processor_options" value="i7960" data-price="352" id="amd_options_1" />
                AMD Core i7 960 3.20Ghz
                </label>
        </div>

我的JavaScript，我是JavaScript的新手，所以请原谅任何小学生的错误！

var base_price = 300;
$("#final_price").html(base_price);

$("*").click(function() {
    // Update price

    // Select all checked
    $(":checkbox").each(function(index) {
        // Select all checked and with a price
        $(this).data("price").each(function(index) {
            // Add the prices
            base_price += $(this).data("price");
        });
    });
    $("#final_price").html(base_price);

});

它循环的原因是因为用户可以从收音机（或复选框）列表中选择显卡，主板等。

以下是我的实况：http://genyx.co.uk/CCB/

请注意，目前只有处理器上有data-price。

Answer 1

改为使用:checked：

$(".process_intel_options input:checked").each(function(index) {
    base_price += $(this).data("price");
});

Answer 2

您的示例存在多个逻辑问题，导致更改项目时价格不断上涨，页面加载时所选选项的成本不正确，以及使用多个选项块时也会出现问题。

首先，为需要包含在定价总额中的每个输入添加一个类，我在我的示例中使用了calculation-item。消除了*选择器的需要，这对你所需要的东西来说太过分了，也很慢。

var base_price = 300;
CalculatePrice();

$(".calculation-item").click(function() {
    CalculatePrice();
});


function CalculatePrice() {
    var base_cost = base_price;
    $(".calculation-item:checked").each(function(index) {
        base_cost += $(this).data("price");
    });

    $("#final_price").html(base_cost);   
}

Working fiddle

Jquery选中带有data-price的所有选中复选框并将它们一起添加

2 个答案: