使用雅虎API的簡單天氣代碼

我想在我的網站上顯示天氣。我有一些JavaScript代碼，如使用雅虎API的簡單天氣代碼

$(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';  
     } 
    });

它沒有奏效。我需要一些指導來解決這個問題。

來源

2012-10-17 pikk

這裏有幾件事情我會改變。

首先，定義一個函數，將更新天氣信息，基於位置：

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-17 09:02:08

我試過這些，但沒有改變：/我認爲wxCombo改變功能有問題。 – pikk

@ pikk它在這裏工作得很好：http://jsfiddle.net/ZF3aW/ –

很多很多感謝您的幫助！錯誤是我的。現在它工作正常。 – pikk

乍一看你缺少一個等號（=）...

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

來源

2012-10-17 08:51:21

我修正了錯誤。謝謝你。我想也有一些錯誤或邏輯錯誤。沒有任何改變下拉項目發生：/ – pikk

使用雅虎API的簡單天氣代碼

回答

相關問題