JavaScript添加给出了错误的答案
JavaScript addition giving the wrong answer
我创建了一个披萨表单,用户可以在其中选择一个披萨,然后如果愿意(通过克隆原始披萨表单),将另一个披萨添加到订单中。然后,总成本显示在顶部的<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: </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: </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): </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));
}
您将添加的每个披萨的浇头添加到添加后的每个披萨上。
更改线路
var checked = $(":checkbox:checked").length;
至
var checked = $(this).parent().find(":checkbox:checked").length;
编辑(这可能是更优化的版本):
var checked = $(this).siblings(':checkbox:checked').andSelf().length;
因为你计算了所有浇头的浇头成本,并将其应用于所有披萨:
$(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();
}
}
});
你应该区分哪种浇头属于哪种披萨。
相关文章:
- Node.js v6.2.0类扩展不是函数错误
- Jquery菜单操作不稳定,定位不正确,存在一般错误
- java脚本的数学方程显示错误的答案
- 如果语句返回错误答案
- JavaScript递归函数错误答案
- 尽管答案错误,JavaScript表单仍提交
- 更改无效(错误答案)的段落颜色和文本颜色
- Javascript - 包括“*”或“/”的计算给了我一个错误的答案
- 给出错误答案的Java脚本数字相加
- JavaScript添加给出了错误的答案
- JavaScript中途停止执行并评估错误答案?,Console.log是正确的
- FizzBuzz"错误答案风格的代码
- javascript部门给出错误答案
- 使用jquery计算表行会产生错误的答案
- 使用mercede素数生成器得到错误答案
- 在特定条件下增加计数器(例如:仅当用户没有输入错误答案时)
- javascript提示编号,如果答案错误,则继续提示
- 试图使用jquery创建包含多个错误答案的文本输入
- 在测验中选择单选按钮时,突出显示正确和错误的答案
- 文档.getElementById将答案从提示符注入到错误的位置