Django+jQuery开发：如何为Yahoo天气预报每日加载对应天气图标？

嘿，作为同样踩过Yahoo Weather API坑的开发者，给你捋捋怎么搞定这个图标不匹配的问题～

首先得明确：Yahoo的天气图标是基于数字天气代码生成的，不是“多云”“阵雨”这类文本描述。你之前所有图标都一样，大概率是因为只取了单个元素的文本值，没给每个预报项匹配专属的天气代码。

下面是具体的解决步骤：

1. 先在模板里埋好每个预报项的天气代码 #

Yahoo Weather API返回的每个预报节点里，都有一个code字段（比如28对应多云，30对应晴转多云），这是图标匹配的核心。在Django渲染预报列表时，把这个代码藏到每个预报项的隐藏元素里：

{% for forecast in forecast_list %}
<div class="forecast-item">
  <!-- 隐藏存储当前预报的天气代码 -->
  <span class="weather-code" style="display: none;">{{ forecast.code }}</span>
  <!-- 待填充的天气图标 -->
  <img class="ico" src="" alt="{{ forecast.text }}">
  <!-- 其他预报信息 -->
  <p>{{ forecast.date }}</p>
  <p>{{ forecast.high }}° / {{ forecast.low }}°</p>
</div>
{% endfor %}

2. 用jQuery遍历每个预报项设置图标 #

修改你的jQuery代码，不要只取单个元素的值，而是遍历所有.ico元素，给每个图标匹配对应的代码：

$(document).ready(function () {
  // 遍历每个预报项的图标元素
  $('.ico').each(function() {
    // 获取当前预报项对应的天气代码（记得去除空格）
    var weatherCode = $(this).siblings('.weather-code').text().trim();
    // 拼接Yahoo官方图标URL
    var iconUrl = 'http://l.yimg.com/a/i/us/we/52/' + weatherCode + '.gif';
    // 给当前图标设置src属性
    $(this).attr('src', iconUrl);
  });
});

为啥之前的代码不行？ #

你之前只获取了$('#patti').text()这一个元素的内容，相当于所有图标都共用同一个天气代码，自然显示一样的图标。现在改成遍历每个预报项，获取各自的专属代码，就能实现不同天气对应不同图标啦～

另外提醒下：如果你的Django后端还没正确提取API里的code字段，得先在后端处理Yahoo的响应数据，把每个预报的code值取出来传给模板哦。

内容的提问来源于stack exchange，提问作者sachin mathew