在 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

将位置传递给函数，而不是硬编码“warsaw”

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('warsaw');、drawWeather('berlin');、...代替drawWeather(); 运行函数。