如何将 SimpleWeather.js 的部分结果放入不同的 Div答案

【问题标题】：How do I place parts of SimpleWeather.js results into different Divs如何将 SimpleWeather.js 的部分结果放入不同的 Div
【发布时间】：2023-03-09 09:55:01
【问题描述】：

首先我不知道 javascript/jquery...仍在努力学习。我目前正在开发一个使用 SimpleWeather.js 在网页上显示天气的项目。但是，我希望结果（即位置、温度、高/低等）显示在页面的不同位置。例如，我希望位置显示在窗口的左上角，当前温度显示在左中，在单独的 div 中。不幸的是，我似乎无法将结果分开：它们都加载在一起并且不能放入单独的 div 中。

我的页面设置如下：

<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+'&deg;</h2>';
              html += '<ul><li>'+weather.city+', '+weather.region+'</li>';
              html += '<li class="currently">'+weather.currently+'</li></ul>';
              //html += '<li>'+weather.tempAlt+'&deg;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>

希望这是有道理的。你们能给予的任何帮助对我来说意义重大。谢谢！

【问题讨论】：

标签： javascript jquery html weather placement

【解决方案1】：

这会创建一个 html 列表并将其放入 div（或您未在此处显示的某些元素）中，id 为天气...所以把它拿出来：

html = '<h1 class="icon-'+weather.code+'"></h1>';
html += '<h2 class="weather-temp">'+weather.temp+'&deg;</h2>';
html += '<ul><li>'+weather.city+', '+weather.region+'</li>';
html += '<li class="currently">'+weather.currently+'</li></ul>';
//html += '<li>'+weather.tempAlt+'&deg;C</li></ul>';

到：

$("#display-location").html(weather.city+', '+weather.region);
 $("#current-weather-column").html(weather.currently);

等等

基本上，您创建一个 html div（或其他元素），给它一个 ID，然后使用上述格式 ($"#ID") 引用该 ID 然后填充它的内部，你使用 .html(text_and_html_you_want_in_the_element)

【讨论】：