在JavaScript/jQuery中有多个位置的天气应用程序

Question

我是新来的，我是编程初学者。
我需要天气应用程序帮助。我使用的是用于显示天气的metaweather API，但我需要显示多个位置的天气。 这是我如何显示只有一个城市的天气，但我不知道如何通过更多的城市？！
请帮忙！

这是代码（HTML）

<main> 
     <section> 
      <div class="container"> 
       <div id="main_panel"> 
       <div class="row"> 
        <div class="col-xs-12 col-sm-6 col-md-4"> 
         <div class="app"> 
          <img class="img-responsive img-rounded" src="images/warszawa.jpg" alt="Warszawa"> 
          <span id="warsaw"> 
          <span class="location"> 
          Unknown 
           <i class="fa fa-map-marker"></i> 
           <span class="today">Today</span> 
          </span> 
          </span> 
          <span class="weather"> 
           <span class="temperature"> 
            0<sup>&deg;</sup> 
            <span class="unit">c</span> 
           </span> 
           <span class="weather-icon"></span> 
           <h3 class="weather-state"></h3> 
          </span> 
         </div> 
        </div> 
        <div class="col-xs-12 col-sm-6 col-md-4"> 
         <div class="app"> 
          <img class="img-responsive img-rounded" src="images/berlin.jpg" alt="Berlin"> 
          <span id="berlin"> 
          <span class="location"> 
          Unknown 
           <i class="fa fa-map-marker"></i> 
           <span class="today">Today</span> 
          </span> 
          </span> 
          <span class="weather"> 
           <span class="temperature"> 
            0<sup>&deg;</sup> 
            <span class="unit">c</span> 
           </span> 
           <h3 class="weather-state"></h3> 
           <span class="weather-icon"></span> 
          </span> 
         </div> 
        </div> 
        <div class="col-xs-12 col-sm-6 col-md-4"> 
         <div class="app"> 
          <img class="img-responsive img-rounded" src="images/lizbona.jpg" alt="Lizbona"> 
          <span id="location"> 
          Unknown 
           <i class="fa fa-map-marker"></i> 
           <span class="today">Today</span> 
          </span> 
          <span class="weather"> 
           <span id="temperature"> 
            0<sup>&deg;</sup> 
            <span class="unit">c</span> 
           </span> 
           <h3 class="weather-state"></h3> 
           <span class="weather-icon"></span> 
          </span> 
         </div> 
        </div> 
       </div> 
      </div> 
     </section> 
    </main> 

这里，它是JavaScript的

var temperature = []; 

var cityName = 'warsaw'; 

var weatherSiteUrl = "http://cors-anywhere.herokuapp.com/https://www.metaweather.com/"; 
var weatherAPIUrl = weatherSiteUrl + "api/"; 
var cityLocation = weatherAPIUrl + "location/search/?query="; 
var iconUrl = "https://www.metaweather.com/"; 


function drawWeather() { 

$.getJSON(cityLocation + cityName, function(data) { 

    $.getJSON(weatherAPIUrl + 'location/' + data[0].woeid, function(data) { 
     $('.location').html(cityName + '<i class="fa fa-map-marker"></i>'); // Name of location 
     $('.weather-state').html(data.consolidated_weather[0].weather_state_name); //Weather state 
      temperature[0] = Math.floor(data.consolidated_weather[0].the_temp); 
     $('.temperature').html(temperature[0] + '<sup>&deg;</sup><span class="unit">c</span>'); // Temperature 
      var weatherImg = iconUrl + 'static/img/weather/' + data.consolidated_weather[0].weather_state_abbr + '.svg'; 
        $('.weather-icon').html('<img src=' + weatherImg + '>'); 

     }); 
    }); 
}; 

drawWeather(); 

Answer 1

代替硬编码的 '华沙' 通过位置的功能

var temperature = []; 

var weatherSiteUrl = "http://cors-anywhere.herokuapp.com/https://www.metaweather.com/"; 
var weatherAPIUrl = weatherSiteUrl + "api/"; 
var cityLocation = weatherAPIUrl + "location/search/?query="; 
var iconUrl = "https://www.metaweather.com/"; 


function drawWeather(cityName) { 

$.getJSON(cityLocation + cityName, function(data) { 

    $.getJSON(weatherAPIUrl + 'location/' + data[0].woeid, function(data) { 
    $('.location').html(cityName + '<i class="fa fa-map-marker"></i>'); // Name of location 
    $('.weather-state').html(data.consolidated_weather[0].weather_state_name); //Weather state 
     temperature[0] = Math.floor(data.consolidated_weather[0].the_temp); 
    $('.temperature').html(temperature[0] + '<sup>&deg;</sup><span class="unit">c</span>'); // Temperature 
     var weatherImg = iconUrl + 'static/img/weather/' + data.consolidated_weather[0].weather_state_abbr + '.svg'; 
       $('.weather-icon').html('<img src=' + weatherImg + '>'); 

    }); 
}); 
}; 

然后，而不是drawWeather();运行功能使用drawWeather('warsaw');,drawWeather('berlin');，...