[英]How do I place parts of SimpleWeather.js results into different Divs
First and foremost I do not know javascript/jquery...still trying to learn. 首先,我不了解javascript / jquery ...仍在尝试学习。 I am currently working on a project that displays the weather on a webpage using SimpleWeather.js.
我目前正在开发一个使用SimpleWeather.js在网页上显示天气的项目。 However, I would like the results (ie location, temperature, highs/lows, etc.) to display in different places on the page.
但是,我希望结果(即位置,温度,高/低等)显示在页面上的不同位置。 For instance, I want the location to display in the top left of my window, and the current temperature in the middle left, in separate divs.
例如,我希望该位置显示在窗口的左上角,而当前温度显示在左上角的单独的div中。 Unfortunately, I cannot seem to separate the results: they all load together and cannot be placed into separate divs.
不幸的是,我似乎无法将结果分开:它们都加载在一起并且不能放在单独的div中。
I have my page set up like this: 我的页面设置如下:
<body>
<div id="container">
<div id="top-header">
<h1 id="display-location">Location Here...</h1>
</div>
</div>
<div id="main-body">
<div id="current-weather-column">
<h2>Current weather is gonna go here.</h2>
</div>
</div>
<div id="four-day-forecast-area" class="three-col">
<h2>Rest of forecast/four-day forecast here...</h2>
</div>
<script>
// Docs at http://simpleweatherjs.com
$(document).ready(function() {
$.simpleWeather({
zipcode: '60605',
woeid: '', //2357536
location: '',
unit: 'f',
success: function(weather) {
if(weather.temp > 75) {
$('body').animate({backgroundColor: '#F7AC57'}, 1500);
} else {
$('body').animate({backgroundColor: '#0091c2'}, 1500);
}
html = '<h1 class="icon-'+weather.code+'"></h1>';
html += '<h2 class="weather-temp">'+weather.temp+'°</h2>';
html += '<ul><li>'+weather.city+', '+weather.region+'</li>';
html += '<li class="currently">'+weather.currently+'</li></ul>';
//html += '<li>'+weather.tempAlt+'°C</li></ul>';
var timestamp = moment(weather.updated);
html += '<p class="updated">Updated '+moment(timestamp).fromNow()+'</p>';
$("#weather").html(html);
},
error: function(error) {
$("#weather").html('<p>'+error+'</p>');
}
});
});
<!-- I then list the rest of the script which is fairly long. If needed, you can take a look at http://simpleweatherjs.com -->
</body>
Hopefully that makes sense. 希望这是有道理的。 Any help you guys could give would mean a great deal to me.
你们能提供的任何帮助对我来说都意义非凡。 Thank you!
谢谢!
This makes an html list and puts it into a div (or some element you aren't showing here) with id of weather... So take this out: 这将生成一个HTML列表,并将其放入带有天气ID的div(或您未在此处显示的某些元素)中,因此请注意以下几点:
html = '<h1 class="icon-'+weather.code+'"></h1>';
html += '<h2 class="weather-temp">'+weather.temp+'°</h2>';
html += '<ul><li>'+weather.city+', '+weather.region+'</li>';
html += '<li class="currently">'+weather.currently+'</li></ul>';
//html += '<li>'+weather.tempAlt+'°C</li></ul>';
TO: 至:
$("#display-location").html(weather.city+', '+weather.region);
$("#current-weather-column").html(weather.currently);
And so on 等等
Basically you create an html div (or other element), give it an ID, then reference that ID using the above format ($"#ID") To then populate it's internals, you use .html(text_and_html_you_want_in_the_element) 基本上,您创建一个html div(或其他元素),为其指定一个ID,然后使用上述格式($“#ID”)引用该ID。然后使用.html(text_and_html_you_want_in_the_element)填充其内部,
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.