Question

我正在使用jquery和forecast.io创建一个天气应用程序。当我尝试在菜单面板中更改城市时，上一个城市的7天天气信息仍然存在，而当前状况和每小时预测的信息会按预期更改。有关详细信息，请参阅下面的图像。

伦敦的天气：

爱丁堡的天气（我缩小了包含所有内容）：

以下是我使用的代码：

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) + "&#176;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()]);
    }
}

Answer 1

函数调用的最后一行weeklyForecast(json)如下：

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

这行代码只会将另一周的预测值附加到ID为WeekForecast的元素，而不是替换当前存在的内容。尝试将其更改为.html()而不是.append()或使用.empty()

清除元素

改变城市时重复信息

1 个答案: