Как разместить части результатов SimpleWeather.js в разных Divs

Прежде всего я не знаю javascript/jquery ... все еще пытаюсь учиться. В настоящее время я работаю над проектом, который отображает погоду на веб-странице с помощью SimpleWeather.js. Однако мне хотелось бы, чтобы результаты (то есть местоположение, температура, максимумы/минимумы и т. Д.) Отображались в разных местах на странице. Например, я хочу, чтобы местоположение отображалось в левом верхнем углу моего окна, а текущая температура - в середине слева, в отдельных div. К сожалению, я не могу отделить результаты: все они загружаются вместе и не могут быть помещены в отдельные div.Как разместить части результатов SimpleWeather.js в разных Divs

Я моя страница настроить так:

<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>

Хотелось бы надеяться, что имеет смысл. Любая помощь, которую вы могли бы дать, это значило бы для меня. Спасибо!

источник

2014-01-29 user3247197

Это делает список HTML и помещает его в DIV (или какой-то элемент, который вы не показаны здесь) с идентификатором погоды ... Так возьмите это:

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>';

TO:

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

И так далее

в основном вы создаете HTML DIV (или другой элемент), дать ему идентификатор, затем ссылаться на этот идентификатор, используя вышеуказанный формат ($ «# ID») Чтобы затем заселить это внутреннее s, вы используете .html (text_and_html_you_want_in_the_element)

источник

2014-01-29 05:08:19

Большое вам спасибо! Это сработало отлично! – user3247197

Как разместить части результатов SimpleWeather.js в разных Divs

ответ

Смежные вопросы