Question

我创建了一个披萨形式，用户可以选择披萨，然后根据需要在订单中添加另一个披萨（通过克隆原始披萨形式）。然后，总费用会显示在顶部的<span>。

问题：如果用户选择第一个披萨的配料（价格为0.99），然后决定添加另一个披萨并为其添加配料，则总计变得不正确 - 它会增加成本额外的浇头，即使用户没有选择那么多！用户添加的披萨越多，结果就越陌生。

HTML：

<center><h3>Total Cost: £<span id ="totalPrice">0.00</span></h3></center>
   <div id="1">
        <fieldset>
            <form class="pure-form">
            <legend>Pizza</legend>
            <label><b>Pizza Type: &nbsp;</b></label>
            <select id="pizza">
                <option name="margarita">Margarita</option>
                <option name="deep-pan">Deep Pan</option>
                <option name="stuffed-crust">Stuffed Crust</option>
            </select>
                <span style="float:right">
                <label><b>Pizza Size: &nbsp;</b></label>
                <select id="pizzaSize">
                    <option></option>
                    <option name="e-small" data-price="4.99">Extra Small - £4.99</option>
                    <option name="small" data-price="5.99">Small - £5.99</option>
                    <option name="medium" data-price="6.99">Medium - £6.99</option>
                    <option name="large" data-price="8.99">Large - £8.99</option>
                    <option name="e-large" data-price="9.99">Extra Large - £9.99</option>
                    <option name="f-size" data-price="10.99">Family Size - £10.99</option>
                </select>
                </span>
            </form>
        </fieldset>
        <fieldset style = "border-top:0px">
        <form class="pure-form">
            <legend><b>Toppings (99p Each): &nbsp;</b></legend>
            <input type="checkbox" name="onions">Onions</input>
            <input type="checkbox" name="mushrooms">Mushrooms</input>
            <input type="checkbox" name="peppers">Peppers</input>
            <input type="checkbox" name="olives">Olives</input>
            <input type="checkbox" name="garlic"> Garlic</input>
            <input type="checkbox" name="peperoni">Peperoni</input>
            <input type="checkbox" name="cheese">Pesto</input>
        </form>
        </fieldset>
        <br>
    </div>
    <div id="extraPizza"></div>
    <center><button id="addPizza"> Add Pizza </button></center>

JS：

var pizzaArray = new Array();

function pizza(number, pizzaCost, toppingCost) {
    this.pizzaNumber = number;
    this.pizzaCost = pizzaCost;
    this.toppingCost = toppingCost;
}

var pizzaCounter = 1;

pizzaArray.push(new pizza(pizzaCounter, 0.00, 0.00));

$("#pizza").change(function() {
    $("#pizzaSize").prop('disabled', false);
})

$(document).on("change","#pizzaSize", function() {
    var formID = $(this).closest('div').attr("id");
    for(var i = 0; i < pizzaArray.length; i++) {
        if (pizzaArray[i].pizzaNumber == formID) {
            var selectionPrice = $('option:selected', this).attr('data-price');
            var selectionInt = parseFloat(selectionPrice, 10);
            pizzaArray[i].pizzaCost = selectionInt;
            calculateCost();
        }
    }
});

$(document).on("change","input[type='checkbox']", function() {
    var checked = $(":checkbox:checked").length;
    var toppingCost = (0.99 * checked);
    var formID = $(this).closest('div').attr("id");
    for(var i = 0; i < pizzaArray.length; i++) {
        if (pizzaArray[i].pizzaNumber == formID) {
            pizzaArray[i].toppingCost = toppingCost;
            calculateCost();
        }
    }
});

$( "#addPizza" ).click(function() {
    pizzaCounter++;
    pizzaArray.push(new pizza(pizzaCounter, 0.00, 0.00));
    $("#1").clone().prop("id", pizzaCounter).appendTo("#extraPizza");
    $("#"+pizzaCounter).find("input[type='checkbox']").removeAttr('checked');
});

function calculateCost() {
    var total = 0;
    for(var i = 0; i < pizzaArray.length; i++) {
        total = total + pizzaArray[i].pizzaCost + pizzaArray[i].toppingCost ;
    }
    $("#totalPrice").text(total.toFixed(2));
}

Answer 1

因为您计算所有配料的顶部成本并适用于所有披萨：

$(document).on("change","input[type='checkbox']", function() {
    var checked = $(":checkbox:checked").length;

    // this value is used for all pizzas, which is incorrect
    var toppingCost = (.99 * checked);

    var formID = $(this).closest('div').attr("id");
    for(var i = 0; i < pizzaArray.length; i++) {
        if (pizzaArray[i].pizzaNumber == formID) {
            pizzaArray[i].toppingCost = toppingCost;
            calculateCost();
        }
    }
});

你应该区分哪个顶部属于哪个披萨。

Answer 2

你添加了每个披萨上添加的每一个比萨饼。

更改行

var checked = $(":checkbox:checked").length;

到

var checked = $(this).parent().find(":checkbox:checked").length;

编辑（这可能是更优化的版本）：

var checked = $(this).siblings(':checkbox:checked').andSelf().length;

JavaScript添加错误的答案

2 个答案: