Question

我想在我的网站上显示天气。我有一些像

这样的javascript代码

$(function () {

    // Specify the ZIP/location code and units (f or c)
    //var loc = '10001'; // or e.g. SPXX0050
    //var u = 'f';

    var loc = 'TUXX0002';
    //var loc = 'TUXX0014';
    var u = 'c';
    //var locA = 'TUXX0002';
    //var locI = 'TUXX0015';


    var query = "SELECT item.condition FROM weather.forecast WHERE location='" + loc + "' AND u='" + u + "'";
    var cacheBuster = Math.floor((new Date().getTime()) / 1200 / 1000);
    var url = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent(query) + '&format=json&_nocache=' + cacheBuster;

    window['wxCallback'] = function (data) {
        var info = data.query.results.channel.item.condition;
        $('#wxIcon').css({
            backgroundPosition: '-' + (61 * info.code) + 'px 0'
        }).attr({
            title: info.text
        });
        $('#wxIcon2').append('<img src="http://l.yimg.com/a/i/us/we/52/' + info.code + '.gif" width="34" height="34" title="' + info.text + '" />');
        $('#wxTemp').html(info.temp + '&deg;' + (u.toUpperCase()));
    };

    $.ajax({
        url: url,
        dataType: 'jsonp',
        cache: true,
        jsonpCallback: 'wxCallback'
    });

});

现在它只显示一个位置。（使用 loc 变量）。我想添加下拉列表或类似更改位置的链接。如果用户选择“A”位置，则显示“位置的天气”等。我添加了一个下拉项。这是代码。

<select id="wxCombo">
   <option value="istanbul">istanbul</option>
   <option value="ankara">ankara</option>
   <option value="izmir">izmir</option>     
</select>

比我在同一个javascript页面上添加一些更改功能的javascript代码。

var wxCombo = $("#wxCombo").val(); 
    $("#wxCombo").change(function() 
    { 
        if (wxCombo == 'Ankara')
        {
            loc 'TUXX0002';     
        }
    });

没用。我需要一些指导来解决这个问题。

Answer 1

乍一看，你错过了一个=符号......

var wxCombo = $("#wxCombo").val(); 
$("#wxCombo").change(function() 
{ 
    if (wxCombo == 'Ankara')
    {
        loc **=** 'TUXX0002';     
    }
});

Answer 2

以下是我要改变的一些事情。

首先，声明一个将根据位置更新天气信息的功能：

function updateWeather(loc, u)
{
    var query = "SELECT item.condition \
        FROM weather.forecast \
        WHERE location='" + loc + "' AND u='" + u + "'",
    url = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent(query) + '&format=json';

    $.ajax({
        url: url,
        dataType: 'jsonp', // this automatically disables cache too
        success: function(data) {
            var info = data.query.results.channel.item.condition;
            $('#wxIcon').css({
                backgroundPosition: '-' + (61 * info.code) + 'px 0'
            }).attr({
                title: info.text
            });
            $('#wxIcon2').append('<img src="http://l.yimg.com/a/i/us/we/52/' + info.code + '.gif" width="34" height="34" title="' + info.text + '" />');
            $('#wxTemp').html(info.temp + '&deg;' + (u.toUpperCase()));
        }
    });
}

然后，将其挂钩到.change()处理程序：

$("#wxCombo").change(function() { 
    var country = $(this).val();

    if (country == 'ankara') {
        updateWeather('TUXX0002', 'C');
    }
    // etc.
});

演示：http://jsfiddle.net/ZF3aW/

使用Yahoo API的简单天气代码

2 个答案: