如何從本地天氣應用的下拉菜單中獲取國家/地區的信息？

Question

我正在創建一個本地天氣應用程序，並且我創建了一個下拉菜單，您可以在其中單擊某個位置並顯示諸如城市，國家和溫度等信息。但是，我無法在每次點擊某個位置時都顯示這些信息。

這是我的代碼。

正如你所看到的，我能夠加載當前位置和溫度。我所做的是列出全局變量，並在function getLocation()中調用它們並運行function getWeather()中的信息。對於下拉菜單，我製作了一個名爲mainCities的數組，並將城市附加到function testMenu()的下拉菜單中。在這個功能中，我加了onclick=testWeather('place')。對於這一個，我創建了另一個函數function testWeather(cityLocation)，其中我再次列出了全局變量的信息，並試圖在function getWeather()中再次運行它，但它不起作用。我錯過了什麼？

您可以在行動中看到我的代碼：http://codepen.io/kikibres/pen/EZMJZw

$(document).ready(function() { 
 
    
 
    var currentLat; 
 
    var currentLong; 
 
    var currentCity; 
 
    var currentRegion; 
 
    var currentCountry; 
 
    
 
    var mainCities = { 
 
    'San_Francisco': { 
 
     'region': 'California', 
 
     'country': "United States", 
 
     'lat': 37.7749300, 
 
     'lon': -122.4194200 
 
    }, 
 
    'St._Louis': { 
 
     'region': 'Missouri', 
 
     'country': "United States", 
 
     'lat': 38.6272700, 
 
     'lon': -90.1978900 
 
    }, 
 
    'Miami': { 
 
     'region': 'Florida', 
 
     'country': "United States", 
 
     'lat': 25.7742700, 
 
     'lon': -80.1936600 
 
    }, 
 
    'Tokyo': { 
 
     'region': 'Tokyo', 
 
     'country': "Japan", 
 
     'lat': 35.689500, 
 
     'lon': 139.6917100 
 
    } 
 
    }; 
 
    
 
    function testMenu() { 
 
    for (var place in mainCities) { 
 
     var city = place.replace(/_/g, ' '); 
 
     $('#testMenu').append("<li onclick=testWeather('" + place + "');><a href='#'>" + city + "</a></li>"); 
 
    } 
 
    }; 
 
    
 
    function testWeather(cityLocation) { 
 
    currentLat = testLocation[cityLocation].lat; 
 
    currentLong = testLocation[cityLocation].lon; 
 
    currentRegion = testLocation[cityLocation].region; 
 
    currentCity = testLocation[cityLocation]; 
 
    currentCountry = testLocation[cityLocation].country; 
 
    
 
    getWeather(); 
 
    
 
    }; 
 
    
 
    function getLocation() { 
 
    $.getJSON('http://ip-api.com/json/?callback=?', function(data) { 
 
     
 
     currentRegion = data.regionName; 
 
     currentCity = data.city; 
 
     currentCountry = data.country; 
 
     currentLat = data.lat; 
 
     currentLong = data.lon; 
 
     
 
     //$("#cityname").text(currentCity); 
 
     
 
     getWeather(); 
 
     
 
    }); 
 
    }; 
 
    
 
function getWeather() { 
 
    
 
    $("#cityname").text(currentCity); 
 
    $("#state").text(currentRegion); 
 
    $("#country").text(currentCountry); 
 
    
 
    $.getJSON('http://api.openweathermap.org/data/2.5/weather?lat=' + currentLat + '&lon=' + currentLong + '&units=imperial&APPID=e656b9ee098cf2341fcfdb365b96b4a8', function(json) { 
 
    
 
    var showfahrenheit = true; 
 
    var tempfahrenheit = Math.round(json.main.temp); 
 
    var temcelcius = Math.round((tempfahrenheit - 32) * 5/9); 
 
    
 
    $("#temp").html(tempfahrenheit); 
 
    
 
    $('#unit-switch').on('click', function() { 
 
     if (showfahrenheit === false) { 
 
     $("#temp").html(tempfahrenheit); 
 
     showfahrenheit = true; 
 
     } else { 
 
     $("#temp").html(temcelcius); 
 
     showfahrenheit = false; 
 
     } 
 
     
 
     $("#unit-toggle").toggleClass("toggle"); 
 
\t \t \t //$('#temp').toggleClass('toggle'); 
 
    }); 
 
    
 
    }); 
 
}; 
 
    
 
    $(".cityarea").html(getLocation); 
 
    testMenu(); 
 
    
 
    
 
});

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400'); 
 
body { 
 
    position: relative; 
 
} 
 
html,body{ 
 
    height:100%; 
 
} 
 
.wrapper { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 
.container { 
 
    position: relative; 
 
    display: block; 
 
    margin: 0 auto; 
 
    width: 60%; 
 
} 
 
.header h1 { 
 
    text-align: center; 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight: normal; 
 
    margin: 0 0 10px 0; 
 
} 
 
.weatherbox { 
 
    text-align: center; 
 
} 
 
.cityarea h2 { 
 
    color: #000000; 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight: normal; 
 
    font-size: 2em; 
 
    margin: 0; 
 
} 
 
.countryarea { 
 
    position: relative; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-justify-content: center; 
 
    justify-content:   center; 
 
    margin: 0 auto; 
 
} 
 
.countryarea h3 { 
 
    margin: 0 0 10px 0; 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight: normal; 
 
} 
 
.countryarea h3:first-child { 
 
    margin-right: 8px; 
 
} 
 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
    font-size: 16px; 
 
    color: #FFF; 
 
} 
 
.dropdown-header { 
 
    display: block; 
 
    padding: 3px 20px; 
 
    font-size: 12px; 
 
    line-height: 1.42857143; 
 
    color: #777; 
 
    white-space: nowrap; 
 
    text-transform: uppercase; 
 
} 
 
input[type=checkbox]{ 
 
    display: none; 
 
} 
 
label{ 
 
    box-sizing: border-box; 
 
    display: inline-block; 
 
    width: 100%; 
 
    background-color: #57A0D4; 
 
    padding: 10px 20px; 
 
    cursor: pointer; 
 
    text-align: center; 
 
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); 
 
    border-radius: 5px; 
 
    font-size: 20px; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
} 
 
label .fa-globe { 
 
    margin-right: 10px; 
 
} 
 
/* The ul will have display:none by default */ 
 
ul{ 
 
    position: absolute; 
 
    list-style: none; 
 
    text-align: left; 
 
    width: 100%; 
 
    min-width: 160px; 
 
    z-index: 1; 
 
    padding: 5px 0; 
 
    margin: 2px 0 0; 
 
    font-size: 14px; 
 
    text-align: left; 
 
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2); 
 
    display: none; 
 
    background-color: #fff; 
 
    border: 1px solid #ccc; 
 
    border: 1px solid rgba(0,0,0,.15); 
 
    border-radius: 4px; 
 
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); 
 
    box-shadow: 0 6px 12px rgba(0,0,0,.175); 
 
} 
 
ul li{ 
 
    /*padding: 15px;*/ 
 
    background-color: #fff; 
 
    color: #4FB9A7; 
 
    margin-bottom: 1px; 
 
    cursor: pointer; 
 
} 
 
ul li a { 
 
    padding: 8px 20px; 
 
    color: inherit; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 
ul li a:hover{ 
 
    background-color: #4FB9A7; 
 
    color: #FFF; 
 
} 
 
input[type=checkbox]:checked ~ label { 
 
    background-color: #3D88BD; 
 
} 
 
input[type=checkbox]:checked ~ ul { 
 
    display: block; 
 
} 
 
ul .divider { 
 
    height: 1px; 
 
    margin: 9px 0; 
 
    overflow: hidden; 
 
    background-color: #e5e5e5; 
 
} 
 
.temperaturearea span#temp { 
 
    position: relative; 
 
    color: #000000; 
 
    font-size: 80px; 
 
} 
 
.temperaturearea #temp:after { 
 
    content: ''; 
 
    position: absolute; 
 
    height: 10px; 
 
    width: 10px; 
 
    top: 16px; 
 
    right: -17px; 
 
    border: 3px solid #000000; 
 
    border-radius: 50%; 
 
} 
 
.weather > span { 
 
    position: relative; 
 
    font-size: 1.2rem; 
 
} 
 
.weather > span:before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: -10px; 
 
    top: 0px; 
 
    height: 3px; 
 
    width: 3px; 
 
    border: 2px solid #000; 
 
    border-radius: 50%; 
 
} 
 
.main-toggle span { 
 
    margin: 0 0 0 16px; 
 
} 
 
.main-toggle span:last-child { 
 
    margin-left: 11px; 
 
} 
 
.weather button { 
 
\t \t background: #6bbf6b; 
 
\t \t border: none; 
 
\t \t border-radius: 30px; 
 
\t \t outline: none; 
 
\t \t width: 45px; 
 
\t \t height: 20px; 
 
\t \t margin: 5px 5px 0; 
 
\t \t cursor: pointer; 
 
\t \t position: relative; 
 
\t \t transition: background .2s; 
 
} 
 
.weather button:active { 
 
\t \t background: #67b567; 
 
\t } 
 
.weather #unit-toggle { 
 
\t \t position: absolute; 
 
\t \t display: inline-block; 
 
\t \t left: -8px; 
 
\t \t top: 2px; 
 
\t \t width: 15px; 
 
\t \t height: 15px; 
 
\t \t background: #fff; 
 
\t \t border-radius: 50%; 
 
\t \t transition: left .2s; 
 
} 
 
#unit-toggle.toggle { 
 
\t \t left: 16px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="container"> 
 
    <div class="header"><h1>Local Weather</h1></div> 
 
    <div class="weatherbox"> 
 
     <div class="cityarea"> 
 
     <h2 id="cityname"></h2> 
 
     </div> 
 
     <div class="countryarea"> 
 
     <h3 id="state"></h3> 
 
     <h3 id="country"></h3> 
 
     </div> 
 
     <div class="dropdownlocation"> 
 
     <div class="dropdown"> 
 
     <input type="checkbox" id="checkbox-toggle"> 
 
    <label for="checkbox-toggle"><i class="fa fa-globe" aria-hidden="true"></i><i class="fa fa-caret-down" aria-hidden="true"></i></label> 
 
    <ul id="testMenu"> 
 
     <li><a href="#">Current Location</a></li> 
 
     <li class="divider"></li> 
 
     <li class="dropdown-header">Main Cities</li> 
 
    </ul> 
 
     </div> 
 
     </div> 
 
    <div class="temperaturearea"> 
 
     <div> 
 
     <span id="wicon"></span> 
 
     </div> 
 
     <div id="wdescription"></div> 
 
     <span id="temp"></span> 
 
     <div class="weather main-toggle"> <!-- Begin Unit Switch --> 
 
     <span>F</span> 
 
     <button id="unit-switch"><span id="unit-toggle"></span></button> 
 
     <span>C</span> 
 
    </div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

有幾個與代碼的問題，因爲你已經定義裏面document.ready所有功能和變量，你可以」 t訪問document.ready以外的任何功能和變量。這就是爲什麼當你在onclick裏調用'testWeather'時，它會拋出'testWeather'沒有定義。爲了解決這個問題（你應該讓你的變量和函數成爲全局變量），你應該在document.ready之外定義你所有的變量。只保留document.ready內的兩行代碼。 $(".cityarea").html(getLocation); testMenu();

但是，這將只是解決「testWeather」沒有定義問題，有onre更多的問題，在你的代碼，裏面testWeather功能存在，你正在使用一個屬性叫做testLocation，這是沒有定義的，所以你會在這裏得到一個JavaScript錯誤。您已將試驗位置保存在mainCities變量中，因此您應該使用mainCities而不是testLocation。這兩項更改將使您的應用程序無任何錯誤地工作。這裏是更正的JavaScript代碼。你的代碼還有一個小錯誤，你讀現在的城市的方式是不正確的。

$(document).ready(function() { 
    $(".cityarea").html(getLocation); 
    testMenu(); 
}); 
    var currentLat; 
    var currentLong; 
    var currentCity; 
    var currentRegion; 
    var currentCountry; 

    var mainCities = { 
     'San_Francisco': { 
      'region': 'California', 
      'country': "United States", 
      'lat': 37.7749300, 
      'lon': -122.4194200 
     }, 
     'St._Louis': { 
      'region': 'Missouri', 
      'country': "United States", 
      'lat': 38.6272700, 
      'lon': -90.1978900 
     }, 
     'Miami': { 
      'region': 'Florida', 
      'country': "United States", 
      'lat': 25.7742700, 
      'lon': -80.1936600 
     }, 
     'Tokyo': { 
      'region': 'Tokyo', 
      'country': "Japan", 
      'lat': 35.689500, 
      'lon': 139.6917100 
     } 
    }; 

    function testMenu() { 
     for (var place in mainCities) { 
      var city = place.replace(/_/g, ' '); 
      $('#testMenu').append("<li onclick=testWeather('" + place + "');><a href='#'>" + city + "</a></li>"); 
     } 
    }; 

    function testWeather(cityLocation) { 
     currentLat = mainCities[cityLocation].lat; 
     currentLong = mainCities[cityLocation].lon; 
     currentRegion = mainCities[cityLocation].region; 
     currentCity = mainCities[cityLocation]; 
     currentCountry = mainCities[cityLocation].country; 

     getWeather(); 

    }; 

    function getLocation() { 
     $.getJSON('http://ip-api.com/json/?callback=?', function (data) { 

      currentRegion = data.regionName; 
      currentCity = data.city; 
      currentCountry = data.country; 
      currentLat = data.lat; 
      currentLong = data.lon; 

      //$("#cityname").text(currentCity); 

      getWeather(); 

     }); 
    }; 

    function getWeather() { 

     $("#cityname").text(currentCity); 
     $("#state").text(currentRegion); 
     $("#country").text(currentCountry); 

     $.getJSON('http://api.openweathermap.org/data/2.5/weather?lat=' + currentLat + '&lon=' + currentLong + '&units=imperial&APPID=e656b9ee098cf2341fcfdb365b96b4a8', function (json) { 

      var showfahrenheit = true; 
      var tempfahrenheit = Math.round(json.main.temp); 
      var temcelcius = Math.round((tempfahrenheit - 32) * 5/9); 

      $("#temp").html(tempfahrenheit); 

      $('#unit-switch').on('click', function() { 
       if (showfahrenheit === false) { 
        $("#temp").html(tempfahrenheit); 
        showfahrenheit = true; 
       } else { 
        $("#temp").html(temcelcius); 
        showfahrenheit = false; 
       } 

       $("#unit-toggle").toggleClass("toggle"); 
       //$('#temp').toggleClass('toggle'); 
      }); 

     }); 
    };