如何在雅虎天气预报的每一天加载天气图标？

Question

我是 Django 和 jquery 的新手。我正在尝试使用 Yahoo Weather API 制作一个天气应用程序。除了天气预报中的天气图标外，一切都很好。以前所有的图标都使用相同的图标不断变化的天气，但我如何编写代码以便在不同的气候下可以看到不同的图标

这是我的 Jquery 代码：

$(document).ready(function () {
    var content = $('#patti').text();
    var iconurl = 'http://l.yimg.com/a/i/us/we/52/' +content+ '.gif';
    $('#wicon').attr('src', iconurl);


    $.each($('.icon1'), function( ) {
        var content2 = $(this).text();
        //console.log("content=",content2);
        var iconurl2 = 'http://l.yimg.com/a/i/us/we/52/' +content2+ '.gif';
        console.log(iconurl2);
        var final = $('.wicon2').attr('src', iconurl2);
        console.log(final)
    });
});

我的 index.html 7 天预测文件：

<div id="container-fluid">
<div class="row">
    {% if form.is_valid %}
    <div class="col-sm-3">
        <div class="container text-center hi" style="background: whitesmoke"><br>
            <iframe class="clock" src="http://free.timeanddate.com/clock/i66pyson/n1906/fn4/tct/pct/ftb/ta1" frameborder="0" width="101" height="18" allowTransparency="true"></iframe>

            <h4 style="color: whitesmoke">{{text}}</h4>
            <br>
            <div id="icon"><img id="wicon" src="" alt="Weather icon"></div><h2 id="thendi" style="color: whitesmoke"><strong>{{temp}} °C</strong></h2>
            <br>
            <!--<p style="color: whitesmoke">{{date|slice:':3'}}</p>-->
            <p id="patti" style="visibility: hidden">{{code}}</p>
        </div>
    </div>
    {% endif %}
        <br>
    <br>
    <!--forecast-->
    <div class="col-md-offset-9">
        <div class="row">
            {% for obj in forecast|slice:":7" %}
                <div class="col-sm-offset-5 text-center" style="color: #7a43b6">
                    <div class="card">
                        <p style="color: whitesmoke"> {{obj.date}}</p>
                        <p style="color: whitesmoke">{{obj.text}}</p>
                        <div class="card-content">
                            <p class='icon1' style="visibility: hidden">{{obj.code}}</p>
                            <div id="icon2"><img class="wicon2" src="" alt="Weather icon"></div>
                            <p style="color: whitesmoke"><i class="fas fa-arrow-up"></i>{{obj.high}}°C</p>
                            <p style="color: whitesmoke"><i class="fas fa-arrow-down"></i>{{obj.low}}°C</p>
                        </div>
                    </div>

                </div>
            {% endfor %}
        </div>
    </div>
</div>

这是我现在得到的结果。

这是视图部分：

def weatherview(request):
form = LocationForm(request.POST or None)
if form.is_valid():
    forminput = form.cleaned_data['location']
    baseurl = "https://query.yahooapis.com/v1/public/yql?"
    yql1 = 'select * from '
    yql2 = 'weather.forecast where woeid in '
    yql3 = '(select woeid from geo.places(1) where text="' + forminput+ '") and u="c"'
    yql_query = yql1+yql2+yql3
    yql_url = baseurl + urllib.parse.urlencode({'q': yql_query}) + "&format=json"
    result = urllib.request.urlopen(yql_url).read()
    data = json.loads(result)
    forecast  =   data['query']['results']['channel']['item']['forecast']
    location = data['query']['results']['channel']['location']
    today = data['query']['results']['channel']['item']['condition']


    return render(request,'index.html', {
        "forecast":forecast,
        "city":location['city'],
        "country": location['country'],
        "region": location['region'],
        "date":today['date'],
        "temp":today['temp'],
        "text":today['text'],
        'code':today['code'],
        'form': form
    })

return render(request,'index.html',{'form':form})

Answer 1

code 是我们显示图像所需要的全部。你可以使用src中的{{ code }}来显示图片。

<img src="http://l.yimg.com/a/i/us/we/52/{{ code }}.gif">

如何在雅虎天气预报的每一天加载天气图标？

How to load weather icons with each day of yahoo weather forecast?

jquery

django

django-templates

yahoo-weather-api