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; 

Answer 2

因爲你你計算餡料成本的所有所有的配料和應用翻過所有比薩：

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

你應該區分哪些摘心屬於比薩餅。