2016-05-14 55 views
-1

我正在用jquery和forecast.io製作天氣應用程序。當我嘗試在菜單面板中更改城市時,以前城市的7天天氣信息仍然存在,而當前情況和小時預測的信息會按預期更改。有關詳細信息,請參閱下面的圖像。更改城市時重複的信息

天氣在倫敦:

enter image description here

天氣愛丁堡(我縮小到包括一切):

enter image description here

以下是我使用的代碼:

var date = new Date(); 
var Today = date.getDay(); 

function loadWeather(cityCoords) { 
    var latlng = cityCoords.coords.latitude + "," + cityCoords.coords.longitude; 
    var forecastURL = "https://api.forecast.io/forecast/3a6d5408bc15a469385cf59ee96c0205/" + latlng + "?lang=ar&units=si"; 
    $.ajax({ 
     url: forecastURL, 
     jsonpCallback: 'jsonCallback', 
     contentType: "application/json", 
     dataType: 'jsonp', 
     success: function(json) { 
      updateCurrentWeather(json); 
      weeklyForecast(json); 
     }, 
     error: function(e) { 
      console.log(e.message); 
     } 
    }); 
} 

function updateCurrentWeather(json) { 
    $("#current_temp").html(Math.round(json.currently.temperature) + "°C"); 
    $("#current_summary").html(json.currently.summary); 
    $("#current_temp").attr("data-icon", icons[json.currently.icon]); 
    $("#nexthour").html(json.hourly.summary); 
    $("#thisweeks").html(" ????? ????? ??? ??????? " + json.daily.summary).addClass("alert alert-info"); 
} 

function weeklyForecast(json) { 
    var Day = Today; 
    var html = ''; 
    for (var d = 0; d < 7; d++) { 
     var dDate = new Date(1000 * json.daily.data[d].time); 
     var weekday = ["?????", "???????", "????????", "????????", "??????", "??????", "?????"]; 

     function firstTwoWords(str) { 
      return str.split(/\s+/).slice(0, 2).join(" "); 
     } 
     var str = json.daily.data[d].summary; 
     html += '<table class="table" align="right" dir="rtl" style="float: right" ><tr><td style="height: 32px">' + weekday[dDate.getDay()] + '</td><td style="height: 32px;text-align: left;">' + Math.round(json.daily.data[d].temperatureMax) + '<td style="height: 32px"></tr></table>' 
    } 

    html += '</div>'; 

    $("#WeekForecast").append(html).hide().fadeIn("slow"); 
} 

function loadDefaultCity() { 
    loadCity("London"); 
} 

function loadCity(city) { 
    $("#location").html(city); 
    if (city.toLowerCase() == "current location") { 
     if (navigator.geolocation) { 
      navigator.geolocation.getCurrentPosition(loadWeather, loadDefaultCity); 
     } else { 
      loadDefaultCity(); 
     } 
    } else { 
     loadWeather(cities[city.toLowerCase()]); 
    } 
} 

回答

0

最後一頁你的函數調用,weeklyForecast(json)的線,如下:

$("#WeekForecast").append(html).hide().fadeIn("slow"); 

這行代碼就乾脆一個星期的價值預測的追加到元素與ID WeekForecast而不是替換目前什麼是那裏。嘗試改變這.html()而不是.append()或使用.empty()

+0

清除元素@IlIIlllIIIlIIlllIlIllIIIlIll還是同樣的問題 – user5695030

+0

@ user5695030請張貼的HTML代碼。我不得不猜測哪些元素與ID相對應。 – IlIIlllIIIlIIlllIlIllIIIlIlI

相關問題