我使用 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....
*/
我真的很抱歉写了这么长的文章。这个问题让我很伤心，我不是专业编码员。所以请帮助我摆脱这个问题。