我试图根据距离找到特定路线的价格，但每当我放置位置时，if循环都会返回else而不是价格

Question

//main.js
//set map options
var myLatLng = { lat: 51.5, lng: -0.1 };
var mapOptions = {
center: myLatLng,
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//create map
var map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);
//create a DirectionsService object to use the route method and get a result for our request
var directionsService = new google.maps.DirectionsService();
//create a DirectionsRenderer object which we will use to display the route
var directionsDisplay = new google.maps.DirectionsRenderer();
//bind the DirectionsRenderer to the map
directionsDisplay.setMap(map);

//define calcRoute function
function calcRoute() {
//create request
var request = {
origin: document.getElementById("source").value,
destination: document.getElementById("destination").value,
travelMode: google.maps.TravelMode.DRIVING, //WALKING, BYCYCLING, TRANSIT
unitSystem: google.maps.UnitSystem.METRIC
}
//pass the request to the route method
directionsService.route(request, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
//Get distance and time
var distance = result.routes[0].legs[0].distance.text;
$("#output").html("<div class='alert-info'>From: " + document.getElementById("source").value + ".<br />To: " + document.getElementById("destination").value + ".<br /> Driving distance: " + result.routes[0].legs[0].distance.text + ".<br />Duration: " + result.routes[0].legs[0].duration.text + ".</div>");
//START CALCULATING PRICE
if(result.routes[0].legs[0].distance.value <= 20 && document.getElementById("carclass").value == 1  ){
document.getElementById("fareairport").value = "30000";
}else if(result.routes[0].legs[0].distance.value <= 20 && document.getElementById("carclass").value == 2  ) {
document.getElementById("fareairport").value = "50000";
}else if(result.routes[0].legs[0].distance.value <= 20 && document.getElementById("carclass").value == 3  ) {
document.getElementById("fareairport").value = "50000";
}else if(result.routes[0].legs[0].distance.value <= 20 && document.getElementById("carclass").value == 4  ) {
document.getElementById("fareairport").value = "100000";
}else if(result.routes[0].legs[0].distance.value <= 20 && document.getElementById("carclass").value == 5  ) {
document.getElementById("fareairport").value = "50000";
}else if(result.routes[0].legs[0].distance.value <= 20 && document.getElementById("carclass").value == 6  ) {
document.getElementById("fareairport").value = "100000";            
}else if(result.routes[0].legs[0].distance.value <= 20 && document.getElementById("carclass").value == 7  ) {
document.getElementById("fareairport").value = "200000";
//END OF ZONE A
}
else if(result.routes[0].legs[0].distance.value >= 21 && result.routes[0].legs[0].distance.value <= 30 && document.getElementById("carclass").value == 1  ) {
document.getElementById("fareairport").value = "70000";
}else if(result.routes[0].legs[0].distance.value >= 21 && result.routes[0].legs[0].distance.value <= 30 && document.getElementById("carclass").value == 2  ) {
document.getElementById("fareairport").value = "100000";
}else if(result.routes[0].legs[0].distance.value >= 21 && result.routes[0].legs[0].distance.value <= 30 && document.getElementById("carclass").value == 3  ) {
document.getElementById("fareairport").value = "100000";
}else if(result.routes[0].legs[0].distance.value >= 21 && result.routes[0].legs[0].distance.value <= 30 && document.getElementById("carclass").value == 4  ) {
document.getElementById("fareairport").value = "150000";
}else if(result.routes[0].legs[0].distance.value >= 21 && result.routes[0].legs[0].distance.value <= 30 && document.getElementById("carclass").value == 5  ) {
document.getElementById("fareairport").value = "90000";
}else if(result.routes[0].legs[0].distance.value >= 21 && result.routes[0].legs[0].distance.value <= 30 && document.getElementById("carclass").value == 6  ) {
document.getElementById("fareairport").value = "120000";
}else if(result.routes[0].legs[0].distance.value >= 21 && result.routes[0].legs[0].distance.value <= 30 && document.getElementById("carclass").value == 7  ) {
document.getElementById("fareairport").value = "200000";
} //END OF ZONE B
else if(result.routes[0].legs[0].distance.value >= 31 && result.routes[0].legs[0].distance.value <= 40 && document.getElementById("carclass").value == 1 ) {
document.getElementById("fareairport").value = "100000";
}else if(result.routes[0].legs[0].distance.value >= 31 && result.routes[0].legs[0].distance.value <= 40 && document.getElementById("carclass").value == 2 ) {
document.getElementById("fareairport").value = "150000";
}else if(result.routes[0].legs[0].distance.value >= 31 && result.routes[0].legs[0].distance.value <= 40 && document.getElementById("carclass").value == 3  ) {
document.getElementById("fareairport").value = "150000";
}else if(result.routes[0].legs[0].distance.value >= 31 && result.routes[0].legs[0].distance.value <= 40 && document.getElementById("carclass").value == 4  ) {
document.getElementById("fareairport").value = "250000";
}else if(result.routes[0].legs[0].distance.value >= 31 && result.routes[0].legs[0].distance.value <= 40 && document.getElementById("carclass").value == 5  ) {
document.getElementById("fareairport").value = "170000";
}else if(result.routes[0].legs[0].distance.value >= 31 && result.routes[0].legs[0].distance.value <= 40 && document.getElementById("carclass").value == 6  ) {
document.getElementById("fareairport").value = "250000";
}else if(result.routes[0].legs[0].distance.value >= 31 && result.routes[0].legs[0].distance.value <= 40 && document.getElementById("carclass").value == 7  ) {
document.getElementById("fareairport").value = "300000";
} //END OF ZONE C
else if(result.routes[0].legs[0].distance.value >= 41 && result.routes[0].legs[0].distance.value <= 50 && document.getElementById("carclass").value == 1 ) {
document.getElementById("fareairport").value = "130000";
}else if(result.routes[0].legs[0].distance.value >= 41 && result.routes[0].legs[0].distance.value <= 50 && document.getElementById("carclass").value == 2 ) {
document.getElementById("fareairport").value = "200000";
}else if(result.routes[0].legs[0].distance.value >= 41 && result.routes[0].legs[0].distance.value <= 50 && document.getElementById("carclass").value == 3  ) {
document.getElementById("fareairport").value = "200000";
}else if(result.routes[0].legs[0].distance.value >= 41 && result.routes[0].legs[0].distance.value <= 50 && document.getElementById("carclass").value == 4  ) {
document.getElementById("fareairport").value = "300000";
}else if(result.routes[0].legs[0].distance.value >= 41 && result.routes[0].legs[0].distance.value <= 50 && document.getElementById("carclass").value == 5  ) {
document.getElementById("fareairport").value = "200000";
}else if(result.routes[0].legs[0].distance.value >= 41 && result.routes[0].legs[0].distance.value <= 50 && document.getElementById("carclass").value == 6  ) {
document.getElementById("fareairport").value = "300000";
}else if(result.routes[0].legs[0].distance.value >= 41 && result.routes[0].legs[0].distance.value <= 50 && document.getElementById("carclass").value == 7  ) {
document.getElementById("fareairport").value = "330000";
}//END OF ZONE D
else if(result.routes[0].legs[0].distance.value >= 51 && result.routes[0].legs[0].distance.value <= 60 && document.getElementById("carclass").value == 1 ) {
document.getElementById("fareairport").value = "160000";
}else if(result.routes[0].legs[0].distance.value >= 51 && result.routes[0].legs[0].distance.value <= 60 && document.getElementById("carclass").value == 2 ) {
document.getElementById("fareairport").value = "200000";
}else if(result.routes[0].legs[0].distance.value >= 51 && result.routes[0].legs[0].distance.value <= 60 && document.getElementById("carclass").value == 3  ) {
document.getElementById("fareairport").value = "200000";
}else if(result.routes[0].legs[0].distance.value >= 51 && result.routes[0].legs[0].distance.value <= 60 && document.getElementById("carclass").value == 4  ) {
document.getElementById("fareairport").value = "300000";
}else if(result.routes[0].legs[0].distance.value >= 51 && result.routes[0].legs[0].distance.value <= 60 && document.getElementById("carclass").value == 5  ) {
document.getElementById("fareairport").value = "200000";
}else if(result.routes[0].legs[0].distance.value >= 51 && result.routes[0].legs[0].distance.value <= 60 && document.getElementById("carclass").value == 6  ) {
document.getElementById("fareairport").value = "300000";
}else if(result.routes[0].legs[0].distance.value >= 51 && result.routes[0].legs[0].distance.value <= 60 && document.getElementById("carclass").value == 7  ) {
document.getElementById("fareairport").value = "330000";
}
//END OF ZONE E
else{
alert(document.getElementById("carclass").value);
}
//display route
directionsDisplay.setDirections(result);
} else {
//delete route from map
directionsDisplay.setDirections({ routes: [] });
//center map in London
map.setCenter(myLatLng);
//show error message
$("#output").html("<div class='alert-danger'>Could not retrieve driving distance.</div>");
}
});
}

//create autocomplete objects for all inputs
var options = {
types: ['(places)']
}
<div class="row">
<form name="airport_booking" method="POST" action="{{action('SpeAirporttransfersController@store')}}" role="form" class="form-horizontal" id="pickup">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="hidden" name="type" >   
<div class="form-row">
<div class="col-md-6 col-sm-6 search-col-padding">
<label>Full Name</label>
<div class="input-group">
<input type="text" name="fullname" class="form-control" required disabled value="{{$summary['fullname']}}"  >
</div>
</div>
<div class="col-md-6 col-sm-6 search-col-padding">
<label>Telephone</label>
<div class="input-group">
<input type="tel" id="pickup_telephone" name="Telephone" pattern="^[0-9 ()+]{13}" class="form-control" disabled style="width:21.5em" value="{{$summary['telephone']}}" >
</div>
</div>
<div class="clearfix"></div>
<div class="col-md-6 col-sm-6 search-col-padding">
<label>Email</label>
<div class="input-group">
<input type="email" name="email" class="form-control" disabled value="{{$summary['email']}}" >
</div>
</div>
<div class="col-md-6 col-sm-6 search-col-padding">
<label>Arrival</label>
<div class="input-group">
<input type="text" name="pickupdate" onchange="checkDate_arrival()" value="{{$summary['pickupdate']}}" id="arrival"  class="form-control datetimepicker" disabled>
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-clock-o fa-fw"></i>
</span>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3 col-3 search-col-padding">
<label>Adults</label>
<input type="text" name="adults" id="arrival" value="{{$summary['adults']}}" class="form-control datetimepicker" disabled >
</div>
<div class="col-md-3 col-sm-3 col-3 search-col-padding">
<label>Children</label>
<input type="text" name="children" value="{{$summary['children']}}"  id="arrival" class="form-control" disabled >
</div>

<div class="col-md-3 col-sm-3 col-3 search-col-padding">
<label>Elderly</label>
<input type="text" name="elderly" id="arrival" value="{{$summary['elderly']}}" class="form-control" disabled>
</div>
<div class="col-md-6 col-sm-6 col-6 search-col-padding">
<label>Airline</label>
<div class="input-group">
<input type="text" name="airline" value="{{$summary['airline']}}" class="form-control" disabled >
</div>
</div>
<div class="col-md-6 col-sm-6 col-6 search-col-padding">
<label>Flight Number</label>
<div class="input-group">
<input type="text" name="flightnumber" value="{{$summary['flightnumber']}}" class="form-control"  disabled >
</div>
</div>
<div class="clearfix"></div>
<div class="col-md-6 col-sm-6 search-col-padding">
<label>Source</label>
<input type="text" name="carclass" id = "source" value="{{$summary['fromwhere']}}"  id="arrival" class="form-control" disabled>                                                                 
</div>
<div class="col-md-6 col-sm-6 search-col-padding">
<label>Destination</label>
<div class="input-group">
<input type="text" name="destination" id="destination" value="{{$summary['destination']}}" class="form-control" disabled >
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-map-marker fa-fw"></i>
</span>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 search-col-padding">
<label>Car Type/Class</label>
<div class="input-group">
<input type="text" name="carclass" id="carclass" value="{{$summary['carclass']}}" class="form-control" disabled >
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-map-marker fa-fw"></i>
</span>
</div>
</div>
</div>

<div class="col-md-6 col-sm-6 col-6 search-col-padding">
<label>YOUR PAYMENT METHOD</label>
<input type="text" name="ptmethod"  id="ptmethod" class="form-control" disabled >   
</div>
<div class="col-md-6 col-sm-6 search-col-padding">
<label>FARE DETAILS</label>
<div class="input-group">
<input type="text" name="fare" id="fareairport" disabled class="form-control" >
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-money fa-fw"></i>
</span>
</div>
</div>
</div>
<input type="hidden" name="fromwhere" value="EBB INT AIRPORT">
<div class="col-md-12 search-col-padding">
<input type="submit" name="airport_pickup_submit" class="btn btn-theme md-btn text-uppercase mt-2" value="Book">
</div>
<div class="clearfix"></div>
</div>
</form>
</div>

这是一个javascript脚本，用于计算距离、时间并设置表单中输入的值(总价(。脚本返回距离和时间，但不根据"if循环"设置价格，它返回其他部分
id fairairport是在一定距离内设置的价格输入的id，也取决于所选汽车的类别。

Answer 1

您可以在Javascript中使用Switch语句，而不是在用例中使用if-else。它将更高效，更容易调试。

对于您的用例，您可以创建2个switch语句：1个用于car类，1个用于distance。这里有一个示例代码，它根据您的出发地和目的地的距离来计算您的旅行费用。我将一些值建立在您的代码中。

下面是我在汽车类的Switch语句中使用Switch语句来表示距离的部分。

switch (activities.value) {
case "1":
switch (true) {
case (distance <= 20):
//Price
document.getElementById('fare').innerHTML = "30000";
break;
case (distance >= 21) && (distance <= 30):
//Price
document.getElementById('fare').innerHTML = "70000";
break;
case (distance >= 31) && (distance <= 40):
//Price
document.getElementById('fare').innerHTML = "100000";
break;
case (distance >= 41) && (distance <= 50):
//Price
document.getElementById('fare').innerHTML = "130000";
break;
case (distance >= 51) && (distance <= 60):
//Price
document.getElementById('fare').innerHTML = "160000";
break;
default:
alert("More than 60 KM");
}
break;
case "2":
//Price2
switch (true) {
case (distance <= 20):
//Price
document.getElementById('fare').innerHTML = "50000";
break;
case (distance >= 21) && (distance <= 30):
//Price
document.getElementById('fare').innerHTML = "100000";
break;
case (distance >= 31) && (distance <= 40):
//Price
document.getElementById('fare').innerHTML = "150000";
break;
case (distance >= 41) && (distance <= 50):
//Price
document.getElementById('fare').innerHTML = "200000";
break;
case (distance >= 51) && (distance <= 60):
//Price
document.getElementById('fare').innerHTML = "200000";
break;
default:
alert("More than 60 KM");
}
break;
case "3":
switch (true) {
case (distance <= 20):
//Price
document.getElementById('fare').innerHTML = "50000";
break;
case (distance >= 21) && (distance <= 30):
//Price
document.getElementById('fare').innerHTML = "100000";
break;
case (distance >= 31) && (distance <= 40):
//Price
document.getElementById('fare').innerHTML = "150000";
break;
case (distance >= 41) && (distance <= 50):
//Price
document.getElementById('fare').innerHTML = "200000";
break;
case (distance >= 51) && (distance <= 60):
//Price
document.getElementById('fare').innerHTML = "200000";
break;
default:
alert("More than 60 KM");
}
break;
case "4":
switch (true) {
case (distance <= 20):
//Price
document.getElementById('fare').innerHTML = "50000";
break;
case (distance >= 21) && (distance <= 30):
//Price
document.getElementById('fare').innerHTML = "100000";
break;
case (distance >= 31) && (distance <= 40):
//Price
document.getElementById('fare').innerHTML = "150000";
break;
case (distance >= 41) && (distance <= 50):
//Price
document.getElementById('fare').innerHTML = "200000";
break;
case (distance >= 51) && (distance <= 60):
//Price
document.getElementById('fare').innerHTML = "200000";
break;
default:
alert("More than 60 KM");
}
break;
case "5":
switch (true) {
case (distance <= 20):
//Price
document.getElementById('fare').innerHTML = "50000";
break;
case (distance >= 21) && (distance <= 30):
//Price
document.getElementById('fare').innerHTML = "100000";
break;
case (distance >= 31) && (distance <= 40):
//Price
document.getElementById('fare').innerHTML = "150000";
break;
case (distance >= 41) && (distance <= 50):
//Price
document.getElementById('fare').innerHTML = "200000";
break;
case (distance >= 51) && (distance <= 60):
//Price
document.getElementById('fare').innerHTML = "200000";
break;
default:
alert("More than 60 KM");
}
break;
case "6":
switch (true) {
case (distance <= 20):
//Price
document.getElementById('fare').innerHTML = "50000";
break;
case (distance >= 21) && (distance <= 30):
//Price
document.getElementById('fare').innerHTML = "100000";
break;
case (distance >= 31) && (distance <= 40):
//Price
document.getElementById('fare').innerHTML = "150000";
break;
case (distance >= 41) && (distance <= 50):
//Price
document.getElementById('fare').innerHTML = "200000";
break;
case (distance >= 51) && (distance <= 60):
//Price
document.getElementById('fare').innerHTML = "200000";
break;
default:
alert("More than 60 KM");
}
break;
case "7":
switch (true) {
case (distance <= 20):
//Price
document.getElementById('fare').innerHTML = "50000";
break;
case (distance >= 21) && (distance <= 30):
//Price
document.getElementById('fare').innerHTML = "100000";
break;
case (distance >= 31) && (distance <= 40):
//Price
document.getElementById('fare').innerHTML = "150000";
break;
case (distance >= 41) && (distance <= 50):
//Price
document.getElementById('fare').innerHTML = "200000";
break;
case (distance >= 51) && (distance <= 60):
//Price
document.getElementById('fare').innerHTML = "200000";
break;
default:
alert("More than 60 KM");
}
break;
default:
alert("default");
}
});