Question

现在编写了几个星期，我正在尝试用构造函数和原型编写一个简单的披萨选择器。

我用4个不同的比萨写了4个单选按钮

控制台日志不会显示任何错误，但是在订购时，价格应显示在我的结果ID中，但不是。

我猜测我的原型功能是原因，但我写得非常简单，我不明白它为什么不起作用。

这是我的JS

function Pizza(){
  this.type = [];
  this.price = [];
}

Pizza.prototype.newOrder = function() {
  if(this.type === 1){
    this.price + 5;
    return 
  }
  if(this.type === 2){
    this.price + 7;
    return
  }
}

$(document).ready(function() {
  var customer = new Pizza();
  $("button#order").click(function(event) {
  $("input:checkbox[name=pizza]:checked").each(function(event){
    customer.newOrder();
    $("#price").append(customer.price);
  });
});
})

我的HTML：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/styles.css">
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="js/scripts.js"></script>
    <title>ORDER PIZZA</title>
  </head>
  <body>
    <div class"container">
      <h1>ORDER PIZZA</h1>
      <form id="pizza-form">
        <div class="form-group">
          <p>Pick a pizza</p>
          <input type="checkbox" name="pizza" value="1">Small1 <br>
          <input type="checkbox" name="pizza" value="2">small2<br>
          <input type="checkbox" name="pizza" value="3">large1<br>
          <input type="checkbox" name="pizza" value="4">large2<br>
        </div>
    </div>
      <button id="order" type="submit">ORDER</button>
    </form>
    <h2 id="price"> Total:  </h2>
    </body>
</html>

Answer 1

我完全同意@jdv上面的评论w.r.t学习一些新的调试技巧。

一些错误：

当您致电customer.newOrder时，在该函数中this.type的值仍然是您在构造函数中设置的[]的初始值。您需要将复选框中的选定值作为参数传递给newOrder函数。请注意，复选框的值是String类型而不是Number。查看JQuery each
this.price + 5不是增加Javascript值的正确方法。它应该是this.price = this.price + 5或this.price += 5。
每次点击按钮都需要将价格重置为0，这样就不会将价格加到之前订单的价格上。

我发布了一个可能的问题解决方案，但是这个解决方案与拥有调试和阅读文档的技能相比毫无价值，所以我鼓励你自己解决这个问题，而不是按照这个解决方案 -

function Pizza(){
  this.type = '';
  this.price = 0;
}

Pizza.prototype.newOrder = function(pizzaType) {  
  this.type = pizzaType
  if (this.type === '1') {
    this.price = this.price + 5;
  }
  if (this.type === '2') {
    this.price = this.price + 7;
  }
}

$(document).ready(function() {
  var customer = new Pizza();
  $("button#order").click(function(event) {
    customer.price = 0
    $("input:checkbox[name=pizza]:checked").each(function(index, checkbox){
      customer.newOrder(checkbox.value);
    });
    $("#price").html(customer.price);
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <title>ORDER PIZZA</title>
  </head>
  <body>
    <div class"container">
      <h1>ORDER PIZZA</h1>
      <form id="pizza-form">
        <div class="form-group">
          <p>Pick a pizza</p>
          <input type="checkbox" name="pizza" value="1">Small1 <br>
          <input type="checkbox" name="pizza" value="2">small2<br>
          <input type="checkbox" name="pizza" value="3">large1<br>
          <input type="checkbox" name="pizza" value="4">large2<br>
        </div>
      </form>
      <button id="order">ORDER</button>
      <h2 id="price"> Total:  </h2>
    </div>
  </body>
</html>

构造函数和原型不会附加结果

1 个答案: