1

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

$(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”位置，它会显示“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';     
        }
    });

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

4

2 回答 2

1

乍一看，您缺少一个 = 符号...

var wxCombo = $("#wxCombo").val(); 
$("#wxCombo").change(function() 
{ 
    if (wxCombo == 'Ankara')
    {
        loc **=** 'TUXX0002';     
    }
});
于 2012-10-17T08:51:21.187 回答
1

这里有几件事我会改变。

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

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.
});

Demo: http://jsfiddle.net/ZF3aW/

于 2012-10-17T09:02:08.050 回答