我试图根据距离查找特定路线的价格，但是每当我放置地点时，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('Spe\AirporttransfersController@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循环”设置价格，而是返回else部分idairairport ID是价格输入的ID，如果距离在一定范围内，则该ID取决于所选车的级别。

Answer 1

除了可以在用例中使用if else之外，还可以使用Switch Statement in Javascript。它将更加高效且易于调试。

对于您的用例，您可以创建2条switch语句：1代表汽车类别，1代表距离。这是一个sample code，它根据到您的来源和目的地的距离来计算旅途的票价。我在您的代码中使用了一些值。

下面是我在车类的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");
        }
    });