1

ウェブサイトに天気を表示したい。私はいくつかの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'
    });

});

今のところ、1 つの場所のみが表示されます。( 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.
});

デモ: http://jsfiddle.net/ZF3aW/

于 2012-10-17T09:02:08.050 に答える