JavaScript 添加给出了错误的答案

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

您将在之后添加的每个披萨上添加每个披萨的配料。

换行

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

至

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

编辑(这可能是更优化的版本):

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