时间戳

首页 > 解决方案 > 清空之前的数据后无法显示预测数据

jquery - 清空之前的数据后无法显示预测数据

问题描述

我试图显示 5 天的预测，但是每次我清空之前预测的数据时，它只显示 5 天预测的最后一天的数据。我试图把这个.empty()方法放在任何地方，但似乎没有任何效果。

$.ajax({
  url: queryURLThree,
   method: "GET"
 }).then(function (forecastResT) {

  for (var i = 0; i < forecastResT.list.length; i++) {
    if (forecastResT.list[i].dt_txt.indexOf("18:00:00") !== -1) {
      var day = forecastResT.list[i].dt_txt.split(" ")  
      var forecastNameS = $('<div class="col"><p>' + day[0] + '</p>')
      // add icon logos based on their weather conditions

     var imgOne = $("<img>").attr("src", "http://openweathermap.org/img/w/" + forecastResT.list[i].weather[0].icon + ".png");
     var tempFiveOne = $('<div id = "tempFive">'+ 'Temperature: ' +forecastResT.list[i].main.temp + '<div>');
     var humFiveOne = $('<div id = "humFive"> '+'Humidity: ' + forecastResT.list[i].main.humidity + '<div>');
     $('#fiveDay').empty();
     forecastNameS.append(imgOne);
     forecastNameS.append(tempFiveOne);
     forecastNameS.append(humFiveOne);
     ($('#fiveDay').append(forecastNameS));
  }
}

有人可以帮忙吗？

标签： jqueryapi

解决方案

您正在循环播放 5 个新闻日，并且empty()每次都使用。这意味着您将在添加下一天后立即删除前一天，并且只保留最后一天。

在循环empty() 之前使用：

$('#fiveDay').empty();
for (var i = 0; i < forecastResT.list.length; i++) {
  if (forecastResT.list[i].dt_txt.indexOf("18:00:00") !== -1) {
    var day = forecastResT.list[i].dt_txt.split(" ")  
    var forecastNameS = $('<div class="col"><p>' + day[0] + '</p>')
    // add icon logos based on their weather conditions

    var imgOne = $("<img>").attr("src", "http://openweathermap.org/img/w/" + forecastResT.list[i].weather[0].icon + ".png");
    var tempFiveOne = $('<div id = "tempFive">'+ 'Temperature: ' +forecastResT.list[i].main.temp + '<div>');
    var humFiveOne = $('<div id = "humFive"> '+'Humidity: ' + forecastResT.list[i].main.humidity + '<div>');

    forecastNameS.append(imgOne);
    forecastNameS.append(tempFiveOne);
    forecastNameS.append(
    $('#fiveDay').append(forecastNameS);
  }
}

推荐阅读