用"simpleweatherjs" API显示相应的温度标识

Question

我依赖这个例子：https://codepen.io/fleeting/pen/xklfq 我想在接下来的几天显示徽标，我尝试添加此代码以显示接下来几天的温度：

for(var i=0;i<weather.forecast.length;i++) {
    html += '<p class="days">'+'<span class="d">'+weather.forecast[i].day+'</span>'+'<span class="val">'+weather.forecast[i].high+'</span>'+'</p>';
}

我展示了它们，但我不知道如何实施徽标？

完整的html代码：

$(document).ready(function() {
  $.simpleWeather({
    location: 'Austin, TX',
    woeid: '',
    unit: 'f',
    success: function(weather) {
      html = '<h2><i class="icon-'+weather.code+'"></i> '+weather.temp+'&deg;'+weather.units.temp+'</h2>';
      html += '<ul><li>'+weather.city+', '+weather.region+'</li>';
      html += '<li class="currently">'+weather.currently+'</li>';
      html += '<li>'+weather.wind.direction+' '+weather.wind.speed+' '+weather.units.speed+'</li></ul>';

      //My add here
      for(var i=0;i<weather.forecast.length;i++) {
          html += '<p class="days">'+'<span class="d">'+weather.forecast[i].day+'</span>'+'<span class="val">'+weather.forecast[i].high+'</span>'+'</p>';
      }

      $("#weather").html(html);
    },
    error: function(error) {
      $("#weather").html('<p>'+error+'</p>');
    }
  });
});

Answer 1

徽标包含在 CodePen 上的代码示例中使用的 CSS 中。如果您在 HTML 中引用了 CSS，您只需添加以下内容：

html += '<h2><i class="icon-'+weather.forecast[i].code+'"></i></h2>'

进入你的 for 循环。

因此您的代码如下所示：

//My add here
for(var i=0;i<weather.forecast.length;i++) {
  html += '<p class="days">'+'<span class="d">'+weather.forecast[i].day+'</span>'+'<span class="val">'+weather.forecast[i].high+'</span>'+'</p>';
  html += '<h2><i class="icon-'+weather.forecast[i].code+'"></i></h2>';
}

用"simpleweatherjs" API显示相应的温度标识

Display the corresponding temperature logos with "simpleweatherjs" API

javascript

jquery

weather

weather-api