Question

我正在尝试制作一个旅行计算器，这是HTML，与我附加的CSS样式都可以正常工作。这里没有问题。

<!doctype html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <title>Travel Calculator 2.0</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="styles.css"/>
    </head>

    <body>
      <div class="container-fluid">
          <div id ="travel_calculator" class="row row-eq-height">
            <div id ="common_and_results" class="col-sm-4 order-sm-4 pb-5 pt-3">
              <div id ="results" class="card mb-3">
                <img src="https://via.placeholder.com/1920x1080" alt="placeholder" class="card-img">
                <div class="card-img-overlay">
                  <h1 class="card-title text-white h2">Change Options</h1>
                </div>
                  <div class="col-12">
                    <div class="card bg-info mb-3">
                      <div class="form-group card-body">
                        <label class="h6" for="pay_rate">Pay Rate (assuming 8hr/day)</label>
                        <div id="pay-rate-group" class="input-group">
                          <div class="input-group-prepend">
                            <span class="input-group-text">
                              <i class="fa fa-money"></i>
                            </span>
                            <input class="form-control" name="pay_rate" type="number"
                            id="pay_rate" max="80" min="8" step="1" value="15">
                          </div>
                        </div>
                      </div>
                      <div class="form-group card-body">
                        <label class="h6" for="travelers">Travelers</label>
                        <div id="travelers-group" class="input-group">
                          <div class="input-group-prepend">
                            <span class="input-group-text">
                              <i class="fa fa-user" aria-hidden="true"></i>
                            </span>
                            <input class="form-control" name="travelers" type="number"
                            id="travelers" max="5" min="1" step="1" value="1">
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div id="car" class="col-sm-4 order-sm-1 pb-5 pt-3">
                <div class="card mb-3">
                  <img src="images/pexels-photo-car.jpg" alt="car photo" class="card-img">
                  <div class="card-img-overlay">
                    <h1 class="card-title text-white h2">By Car</h1>
                  </div>
                </div>
                  <div class="col-12">
                    <div class="card bg-info mb-3">
                      <div class="form-group card-body">
                        <label class="h6" for="distance">Distance</label>
                        <div class="input-group">
                          <div class="input-group-prepend">
                            <span class="input-group-text">
                              <i class="fa fa-car" aria-hidden="true"></i>
                            </span>
                            <input class="form-control" name="distance" type="number"
                            id="distance" max="5000" min="50" step="10" value="500">
                          </div>
                        </div>
                      </div>
                      <div class="form-group card-body">
                        <label class="h6" for="mpg">MPG</label>
                        <div class="input-group">
                          <div class="input-group-prepend">
                            <span class="input-group-text">
                              <i class="fa fa-tint" aria-hidden="true"></i>
                            </span>
                            <input class="form-control" name="mpg" type="number"
                            id="mpg" max="100" min="10" step="1" value="23">
                          </div>
                        </div>
                      </div>
                      <div class="form-group card-body">
                        <label class="h6" for="ppg">PPG</label>
                        <div class="input-group">
                          <div class="input-group-prepend">
                            <span class="input-group-text">
                              <i class="fa fa-credit-card" aria-hidden="true"></i>
                            </span>
                            <input class="form-control" name="ppg" type="number"
                            id="ppg" max="20" min=".10" step=".10" value="2.50">
                          </div>
                        </div>
                      </div>
                      <div class="form-group card-body">
                        <label class="h6" for="hotel">Hotel</label>
                        <div class="input-group">
                          <div class="input-group-prepend">
                            <span class="input-group-text">
                              <i class="fa fa-bed"></i>
                            </span>
                            <select class="custom-select form-control" name="hotel" id="hotel">
                              <option value="100">Economy</option>
                              <option value="200">Business</option>
                              <option value="300">Luxury</option>
                            </select>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              <div id="plane" class="col-sm-4 order-sm-1 pb-5 pt-3">
                <div class="card mb-3">
                  <img src="images/pexels-photo-plane.jpg" alt="plane photo" class="card-img">
                  <div class="card-img-overlay">
                    <h1 class="card-title text-white h2">By Air</h1>
                  </div>
                </div>
                  <div class="col-12">
                    <div class="card bg-info mb-3">
                      <div class="form-group card-body">
                        <label class="h6" for="ticket">Ticket</label>
                        <div class="input-group">
                          <div class="input-group-prepend">
                            <span class="input-group-text">
                              <i class="fa fa-credit-card"></i>
                            </span>
                            <input class="form-control" name="ticket" type="number"
                            id="ticket" max="3000" min="50" step="50" value="500">
                          </div>
                        </div>
                      </div>
                      <div class="form-group card-body">
                        <label class="h6" for="bags">Bags</label>
                        <div class="input-group">
                          <div class="input-group-prepend">
                            <span class="input-group-text">
                              <i class="fa fa-briefcase" aria-hidden="true"></i>
                            </span>
                            <input class="form-control" name="checked_bags" type="number"
                            id="checked_bags" max="2" min="1" step="1" value="1">
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div id="update-row" class="row">
              <div id="update-column" class="col-12">
                <button id="update_button" class="btn btn-primary btn-block">Calculate</button>
              </div>
            </div>

        <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
        <script src="travel-calculator.js"></script>
    </body>

</html>

应该使用JavaScript在“更改选项”列中的占位符顶部显示汽车或飞机的照片，以及所附的价格和是否乘坐汽车或飞机的说明。但是当我按下计算按钮时，实际上什么也没发生。

$(function () {
    "use strict";

    var pay_rate = 0;
    var travelers = 0;
    var distance = 0;
    var hotel = 0;

    var MAX_MILES = 300; // assume driving only 300 mi/day
    var WORK_HOURS = 8; // assume 8 hours of work/day

    function getCommonCosts() {

      pay_rate = Number($("#pay_rate").val());
      console.log("pay_rate " + pay_rate);

      travelers = Number($("#travelers").val());
      console.log("travelers " + travelers);
    }

    function getCarCosts() {

      var mpg = Number($("#mpg").val());
      console.log("mpg " + mpg);

      var ppg = Number($("#ppg").val());
      console.log("ppg " + ppg);

      distance = Number($("#distance").val());
      console.log("distance " + distance);

      hotel = Number($("#hotel").val());
      console.log("hotel " + hotel);

      var gallons = distance / mpg;
      console.log("gallons " + gallons);

      var mileage_cost = gallons * ppg;
      console.log("mileage_cost " + mileage_cost);

      var by_car_days = Math.ceil(distance / MAX_MILES);
      console.log("by_car_days " + by_car_days);

      var by_car_hotel = Math.floor(by_car_days) * hotel;
      console.log("by_car_hotel " + by_car_hotel);

      var by_car_pay =
      Math.ceil(by_car_days) * WORK_HOURS * pay_rate * travelers;

      console.log("by_car_pay " + by_car_pay);

      var total = mileage_cost + by_car_hotel + by_car_pay;
      console.log("(car) total " + total);

      return total;
    }

    function getFlightCosts() {

      var cost_per_bag = 50;
      console.log("cost_per_bag " + cost_per_bag);

      var flight_cost = Number($("#flight_cost").val());
      console.log("flight_cost " + flight_cost);

      var checked_bags = Number($("#checked_bags").val());
      console.log("checked_bags " + checked_bags);

      var by_flight_pay = WORK_HOURS * pay_rate * travelers;
      console.log("by_flight_pay " + by_flight_pay);

      var total = (flight_cost * travelers) +
      (checked_bags * cost_per_bag) + by_flight_pay;

      console.log("(plane) total " + total);

      return total;
    }

    function showResult(cost1, cost2) {
      var result_text = "";
      if (cost1 < cost2) {
        $("results img").attr(
          "src",
          "images/pexels-photo-car.jpg"
        );
        result_text = "Road Trip!";
      } else {
        $("results img").attr(
          "src",
          "images/pexels-photo-plane.jpg"
        );
        result_text = "Book a Flight!";
      }

      result_text = "<br/>";
      cost1 = Math.round(cost1 * 100) / 100;
      cost2 = Math.round(cost2 * 100) / 100;
      result_text += "Car: $" + cost1 + "<br/>";
      result_text += "Flight: $" + cost2 + "<br/>";
      $("results h1").html(result_text);
    }

    function updateResults() {
      getCommonCosts();

      var car_costs = getCarCosts() || 0;

      var flight_costs = getFlightCosts || 0;

      showResult(car_costs, flight_costs);
    }

    $("update_button").focus();
    $("update_button").click(function () {
      updateResults();
    });
});

后期编辑javascript：

$（function（）{ “使用严格”；

var pay_rate = 0;
var travelers = 0;
var distance = 0;
var hotel = 0;

var MAX_MILES = 300; // assume driving only 300 mi/day
var WORK_HOURS = 8; // assume 8 hours of work/day

function getCommonCosts() {

  pay_rate = Number($("#pay_rate").val());
  console.log("pay_rate " + pay_rate);

  travelers = Number($("#travelers").val());
  console.log("travelers " + travelers);
}

function getCarCosts() {

  var mpg = Number($("#mpg").val());
  console.log("mpg " + mpg);

  var ppg = Number($("#ppg").val());
  console.log("ppg " + ppg);

  distance = Number($("#distance").val());
  console.log("distance " + distance);

  hotel = Number($("#hotel").val());
  console.log("hotel " + hotel);

  var gallons = distance / mpg;
  console.log("gallons " + gallons);

  var mileage_cost = gallons * ppg;
  console.log("mileage_cost " + mileage_cost);

  var by_car_days = Math.ceil(distance / MAX_MILES);
  console.log("by_car_days " + by_car_days);

  var by_car_hotel = Math.floor(by_car_days) * hotel;
  console.log("by_car_hotel " + by_car_hotel);

  var by_car_pay =
  Math.ceil(by_car_days) * WORK_HOURS * pay_rate * travelers;
  console.log("by_car_pay " + by_car_pay);

  var total = mileage_cost + by_car_hotel + by_car_pay;
  console.log("(car) total " + total);

  return total;
}

function getFlightCosts() {

  var cost_per_bag = 50;
  console.log("cost_per_bag " + cost_per_bag);

  var flight_cost = Number($("#flight_cost").val());
  console.log("flight_cost " + flight_cost);

  var checked_bags = Number($("#checked_bags").val());
  console.log("checked_bags " + checked_bags);

  var by_flight_pay = WORK_HOURS * pay_rate * travelers;
  console.log("by_flight_pay " + by_flight_pay);

  var total = (flight_cost * travelers) +
  (checked_bags * cost_per_bag) + by_flight_pay;

  console.log("(plane) total " + total);

  return total;
}

function showResult(cost1, cost2) {
  var result_text = "";
  if (cost1 < cost2) {
    $("#results img").attr(
      "src",
      "images/pexels-photo-car.jpg"
    );
    result_text = "Road Trip!";
  } else {
    $("#results img").attr(
      "src",
      "images/pexels-photo-plane.jpg"
    );
    result_text = "Book a Flight!";
  }

  result_text = "<br/>";
  cost1 = Math.round(cost1 * 100) / 100;
  cost2 = Math.round(cost2 * 100) / 100;
  result_text += "Car: $" + cost1 + "<br/>";
  result_text += "Flight: $" + cost2 + "<br/>";
  $("results h1").html(result_text);
}

function updateResults() {
  getCommonCosts();

  var car_costs = getCarCosts() || 0;

  var flight_costs = getFlightCosts() || 0;

  showResult(car_costs, flight_costs);
}

$("#update_button").focus();
$("#update_button").click(function () {
  updateResults();
});

}）;

Answer 1

此行：

$("results img")

这不是针对元素。您需要使用井号来定位该ID：

$("#results img")

应该是：

$("#results img").attr(
  "src",
  "images/pexels-photo-car.jpg"
);

请注意，您的听众也未按ID定位。他们都需要以#为前缀来进行ID定位，或者以.来进行类别

另外，我认为您有错字：

var flight_costs = getFlightCosts || 0;

应该是

var flight_costs = getFlightCosts() || 0;

但是，最终，您的控制台将比眼球审核更好地指导您解决问题。乍一看，这两件事将是有问题的。如果在解决这些问题后发布了更多见解，我可以更新此答案。

我不明白为什么这个简单的Javascript无法使用。谁能阐明一些想法？

1 个答案: