Question

希望大家周末愉快！

如果您选择小芝士披萨，价格为5美元。但是，如果你选择小奶酪和花生酱，它仍然是5美元。我想我可能需要添加一个循环/数组。我肯定错过了一些东西。谢谢你的帮助。此外，我是所有这一切的新手，所以没有任何答案可能看起来是基于我所写的知识。谢谢！

var pizzaPrice = 0;

function Pizza(size,toppings,pizzaPrice) {
  this.size = size;
  this.toppings = toppings;
  this.pizzaPrice = 0;
}

Pizza.prototype.price = function() {
  if (this.size === "Small") {
    this.pizzaPrice += 2;
  }
  else if (this.size === "Medium") {
    this.pizzaPrice += 3;
  }
  else if (this.size === "Large") {
    this.pizzaPrice += 4;
  }
  if (this.toppings === "Cheese") {
    this.pizzaPrice += 3;
  }

  else if (this.toppings === "Cheese" && this.toppings === "Peanut Butter") {
    this.pizzaPrice += 10;
    console.log("hey");

  }

  else if (this.toppings === "Vegetarian") {
    this.pizzaPrice += 2;
  }
  else if (this.toppings === "Supreme") {
    this.pizzaPrice += 4;
  }
  else if (this.toppings === "Pepperoni") {
    this.pizzaPrice += 3;
  }

return this.pizzaPrice;
}






$(document).ready(function(){
  $("form#pizza").submit(function(event){
    event.preventDefault();

    var size = $("input[type=radio][name=size]:checked").val();
    var toppings = $("input[type=checkbox][name=toppings]:checked").val();
    var newPizza = new Pizza(size,toppings,pizzaPrice);
    newPizza.price();

    $("#responses").append("<li>" + "You ordered a " + newPizza.size + " " + newPizza.toppings + " pizza. " + " Your total price is " + newPizza.pizzaPrice + "</li>");


      });
    });

<!DOCTYPE html>
<html>
  <head>
    <title>Pizza Pizza</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="css/styles.css" rel="stylesheet" type="text/css">
    <script src="js/jquery-3.2.0.js"></script>
    <script src="js/scripts.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="jumbotron">
        <h2>Pizza Toppings</h2>
      </div>
      <form id="pizza">
        <div class="form-group">
          <p>What size would you like your pizza:</p>
          <input type="radio" name="size" value="Small">Small.<br>
          <input type="radio" name="size" value="Medium">Medium.<br>
          <input type="radio" name="size" value="Large">Large.<br>
        </div>
        <div class="form-group">
          <p>Which toppings would you like</p>
          <input type="checkbox" name="toppings" value="Cheese">Cheese.<br>
          <input type="checkbox" name="toppings" value="Vegetarian">Vegetarian.<br>
          <input type="checkbox" name="toppings" value="Supreme">Supreme.<br>
          <input type="checkbox" name="toppings" value="Pepperoni">Pepperoni.<br>
          <input type="checkbox" name="toppings" value="Fruit">Fruit.<br>
          <input type="checkbox" name="toppings" value="Bacon">Bacon.<br>
          <input type="checkbox" name="toppings" value="Artichoke">Artichoke.<br>
          <input type="checkbox" name="toppings" value="Peanut Butter">Peanut butter.<br>
        </div>
       <button type="submit">Let's get your order</button>
      </form>
      <ul id="responses">
      </ul>
    </div>
  </body>
</html>

Answer 1

首先，您需要获取数组中所有已检查顶部的值，目前您只获得第一个。然后，您需要在计算价格时为每个选定的顶部添加价格。您可以使用indexOf：

var pizzaPrice = 0;

function Pizza(size,toppings,pizzaPrice) {
  this.size = size;
  this.toppings = toppings;
  this.pizzaPrice = 0;
}

Pizza.prototype.price = function() {
  if (this.size === "Small") {
    this.pizzaPrice += 2;
  }
  else if (this.size === "Medium") {
    this.pizzaPrice += 3;
  }
  else if (this.size === "Large") {
    this.pizzaPrice += 4;
  }
  if (this.toppings.indexOf("Cheese") >= 0) {
    this.pizzaPrice += 3;
  }

  if (this.toppings.indexOf("Peanut Butter") >= 0) {
    this.pizzaPrice += 10;

  }

  if (this.toppings.indexOf("Vegetarian") >= 0) {
    this.pizzaPrice += 2;
  }
  if (this.toppings.indexOf("Supreme") >= 0) {
    this.pizzaPrice += 4;
  }
  if (this.toppings.indexOf("Pepperoni") >= 0) {
    this.pizzaPrice += 3;
  }

return this.pizzaPrice;
}






$(document).ready(function(){
  $("form#pizza").submit(function(event){
    event.preventDefault();

    var size = $("input[type=radio][name=size]:checked").val();
    var toppings = [];
    $("input[type=checkbox][name=toppings]:checked").each(function(){
           toppings.push($(this).val());
    });
    var newPizza = new Pizza(size,toppings,pizzaPrice);
    newPizza.price();

    $("#responses").append("<li>" + "You ordered a " + newPizza.size + " " + newPizza.toppings + " pizza. " + " Your total price is " + newPizza.pizzaPrice + "</li>");


      });
    });

<!DOCTYPE html>
<html>
  <head>
    <title>Pizza Pizza</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="css/styles.css" rel="stylesheet" type="text/css">
    <script src="js/jquery-3.2.0.js"></script>
    <script src="js/scripts.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="jumbotron">
        <h2>Pizza Toppings</h2>
      </div>
      <form id="pizza">
        <div class="form-group">
          <p>What size would you like your pizza:</p>
          <input type="radio" name="size" value="Small">Small.<br>
          <input type="radio" name="size" value="Medium">Medium.<br>
          <input type="radio" name="size" value="Large">Large.<br>
        </div>
        <div class="form-group">
          <p>Which toppings would you like</p>
          <input type="checkbox" name="toppings" value="Cheese">Cheese.<br>
          <input type="checkbox" name="toppings" value="Vegetarian">Vegetarian.<br>
          <input type="checkbox" name="toppings" value="Supreme">Supreme.<br>
          <input type="checkbox" name="toppings" value="Pepperoni">Pepperoni.<br>
          <input type="checkbox" name="toppings" value="Fruit">Fruit.<br>
          <input type="checkbox" name="toppings" value="Bacon">Bacon.<br>
          <input type="checkbox" name="toppings" value="Artichoke">Artichoke.<br>
          <input type="checkbox" name="toppings" value="Peanut Butter">Peanut butter.<br>
        </div>
       <button type="submit">Let's get your order</button>
      </form>
      <ul id="responses">
      </ul>
    </div>
  </body>
</html>

Answer 2

这里的陈述

var toppings = $("input[type=checkbox][name=toppings]:checked").val();

不正确。因为它返回了第一次检查checkbox的值。而是使用以下语句来获取已检查值的数组。

var toppings = $("input[type=checkbox][name=toppings]:checked").get();

现在，在检索值时，您可以使用以下内容：

(this.toppings.indexOf("Cheese") >= 0)

如果找不到匹配的结果，indexOf()会返回-1。希望这能解决你的问题。

Answer 3

有很多问题 -

1。）当你这样做时

var toppings = $("input[type=checkbox][name=toppings]:checked").val();

你已经丢失了除第一个之外的所有配料。相反，你可以使用

var toppings = $("input[type=checkbox][name=toppings]:checked");
    var i = 0;
    var toppingVal;
    while(i < toppings.length){
        toppingVal += " "+(toppings[i]).value;
      i++;
    }

2。）在计算价格时，您会使用if..else..if块。如何添加多个浇头，只执行一个块。仅使用if

3。）根据我的建议，你会得到一个由空格（' '）分隔的一串浇头。因此，您无法使用===进行比较。使用indexOf查找浇头字符串是否包含特定的顶部。

看看这个小提琴 https://jsfiddle.net/8u67x4nm/1/。工作正常。

想要做到这一点，所以价格实际上反映了选择

3 个答案: