使用openweathermap显示不同城市的天气数据

Question

我已经使用openweathermap为我的网站构建了一个天气小部件。 JS＆html是-main.html页面中的脚本->

$(function() {

    $('.weather-temperature').openWeather({
        city: 'Dhaka, BD',
        descriptionTarget: '.weather-description',
        windSpeedTarget: '.weather-wind-speed',
        minTemperatureTarget: '.weather-min-temperature',
        maxTemperatureTarget: '.weather-max-temperature',
        humidityTarget: '.weather-humidity',
        sunriseTarget: '.weather-sunrise',
        sunsetTarget: '.weather-sunset',
        placeTarget: '.weather-place',
        iconTarget: '.weather-icon',
        customIcons: 'images/icons/weather/',
        success: function() {

            //show weather
            $('.weather-wrapper').show();

        },
        error: function(message) {

            console.log(message);

        }
    });

}); 

HTML-> / *

                                <div class="weather-wrapper hide">
            <select id='list'>
                    <option value='Dhaka,BD'>Dhaka</option>
                    <option value='Pabna,BD'>Pabna</option>
            </select>

            <img src="" class="weather-icon" alt="Weather Icon" />

            <p><strong>Place</strong>
            <br /><span class="weather-place"></span></p>

            <p><strong>Temperature</strong>
            <br /><span class="weather-temperature"></span> (<span class="weather-min-temperature"></span> - <span class="weather-max-temperature"></span>)</p>

            <p><strong>Description</strong>
            <br /><span class="weather-description capitalize"></span></p>

            <p><strong>Humidity</strong>
            <br /><span class="weather-humidity"></span></p>

            <p><strong>Wind speed</strong>
            <br /><span class="weather-wind-speed"></span></p>

            <p><strong>Sunrise</strong>
            <br /><span class="weather-sunrise"></span></p>

            <p><strong>Sunset</strong>
            <br /><span class="weather-sunset"></span></p>

        </div>      */

没有任何“选择”选项，它将在“达卡”城市正常运行。 我想使用选择选项更改城市名称并显示更改的天气数据。

     /*
      var loc;
         $('#list').change(function() {
         loc = $('#list').val();
         $('.weather-temperature').openWeather({
           city: "' + loc + '",
            //etc.
      */

这是openweather.js代码-----

    /*
      ;(function($) {

$.fn.openWeather  = function(options) {

    //return if no element was bound
    //so chained events can continue
    if(!this.length) { 
        return this; 
    }

    //define default parameters
    var defaults = {
        descriptionTarget: null,
        maxTemperatureTarget: null,
        minTemperatureTarget: null,
        windSpeedTarget: null,
        humidityTarget: null,
        sunriseTarget: null,
        sunsetTarget: null,
        placeTarget: null,
        iconTarget: null,
        customIcons: null,
        units: 'c',
        city: null,
        lat: null,
        lng: null,
        key: null,
        success: function() {},
        error: function(message) {} 
    }

    //define plugin
    var plugin = this;

    //define element
    var el = $(this);

    //api URL
    var apiURL;

    //define settings
    plugin.settings = {}

    //merge defaults and options
    plugin.settings = $.extend({}, defaults, options);

    //if city isn't null
    if(plugin.settings.city != null) {

       //define API url using city (and remove any spaces in city)
       apiURL = 'http://api.openweathermap.org/data/2.5/weather?q='+plugin.settings.city.replace('', '');

    } else if(plugin.settings.lat != null && plugin.settings.lng != null) {

       //define API url using lat and lng
       apiURL = 'http://api.openweathermap.org/data/2.5/weather?lat='+plugin.settings.lat+'&lon='+plugin.settings.lng;
    }

    if(plugin.settings.key != null) {

        apiURL += '&APPID=' + plugin.settings.key;

    }

 etc....
  */

这么长时间的写作我真的很抱歉。 这个问题使我非常难受，我不是专业程序员。 所以请帮助我摆脱这个问题。

Answer 1

将city: "' + loc + '",更改为city:loc,它应该可以正常工作