Question

我正在为FreeCodeCamp挑战做本地天气应用程序。您可以通过以下代码检查我的项目：https://codepen.io/Thiagoral/pen/jVjqwo

我从DarkSky获得JSON，然后以下列方式存储十种可能的天气条件之一（晴天，下雨，下雪等）：

window.little_icon = json.currently.icon;

在getJSON函数之外，我正在尝试创建一个开关，我在其中评估window.little_icon键并根据正确的字符串值为画布设置一个图标。

var icons = new Skycons({color: "#fff"});    

switch(window.little_icon) {
  case "clear-day":
  $("canvas").attr("id", "clear-day");
  icons.set("clear-day", Skycons.CLEAR_DAY);
  break;

  case "clear-night":
  $("canvas").attr("id", "clear-night");
  icons.set("clear-night", Skycons.CLEAR_NIGHT);
  break;

  case "rain":
  $("canvas").attr("id", "rain");
  icons.set("rain", Skycons.RAIN);
  break;

  case "snow":
  $("canvas").attr("id", "snow");
  icons.set("snow", Skycons.SNOW);
  break;

  case "sleet":
  $("canvas").attr("id", "sleet");
  icons.set("sleet", Skycons.SLEET);
  break;

  case "wind":
  $("canvas").attr("id", "wind");
  icons.set("wind", Skycons.WIND);
  break;

  case "fog":
  $("canvas").attr("id", "fog");
  icons.set("fog", Skycons.FOG);
  break;  

  case "cloudy":
  $("canvas").attr("id", "cloudy");
  icons.set("cloudy", Skycons.CLOUDY);
  break;  

  case "partly-cloudy-day":
  $("canvas").attr("id", "partly-cloudy-day");
  icons.set("partly-cloudy-day", Skycons.PARTLY_CLOUDY_DAY);
  break;

  case "partly-cloudy-night":
  $("canvas").attr("id", "partly-cloudy-night");
  icons.set("partly-cloudy-night", Skycons.PARTLY_CLOUDY_NIGHT);
  break;

}

icons.play();

由于某种原因，这不起作用。我之前使用相同的策略，当我使用

获取getJSON函数内的温度时

window.temperature = Math.round(json.currently.temperature);

当我试图进行Celsius / Fahrenheit转换时，我在外面访问它。我在原始函数之外访问此温度值时没有遇到任何问题，但同样不能使用json.currently.icon值。

如果我在getJSON函数中创建了开关，如下面所示，则图标会正确显示。

  // Only the weather state and the temperature, whose unit depends on the client region, are inserted in their respective html div tags. The temperature is rounded down to eliminate decimal places
  $.getJSON(url,function(json){

    //Assigns the temperature to the window object, so it can be accessed outside of getJSON
   window.temperature = Math.round(json.currently.temperature);

    $("#weather").html(json.currently.summary);     
    $("#temperature").html(window.temperature);

    // Sets the background picture according to the weather described in icon
    var little_icon = json.currently.icon;
    // window.aff = json.currently.icon; 
    $("body").addClass(little_icon);

    // Skycon is set according to the icon stored in the json
var icons = new Skycons({color: "#fff"});    

switch(little_icon) {
  case "clear-day":
  $("canvas").attr("id", "clear-day");
  icons.set("clear-day", Skycons.CLEAR_DAY);
  break;

  case "clear-night":
  $("canvas").attr("id", "clear-night");
  icons.set("clear-night", Skycons.CLEAR_NIGHT);
  break;

  case "rain":
  $("canvas").attr("id", "rain");
  icons.set("rain", Skycons.RAIN);
  break;

  case "snow":
  $("canvas").attr("id", "snow");
  icons.set("snow", Skycons.SNOW);
  break;

  case "sleet":
  $("canvas").attr("id", "sleet");
  icons.set("sleet", Skycons.SLEET);
  break;

  case "wind":
  $("canvas").attr("id", "wind");
  icons.set("wind", Skycons.WIND);
  break;

  case "fog":
  $("canvas").attr("id", "fog");
  icons.set("fog", Skycons.FOG);
  break;  

  case "cloudy":
  $("canvas").attr("id", "cloudy");
  icons.set("cloudy", Skycons.CLOUDY);
  break;  

  case "partly-cloudy-day":
  $("canvas").attr("id", "partly-cloudy-day");
  icons.set("partly-cloudy-day", Skycons.PARTLY_CLOUDY_DAY);
  break;

  case "partly-cloudy-night":
  $("canvas").attr("id", "partly-cloudy-night");
  icons.set("partly-cloudy-night", Skycons.PARTLY_CLOUDY_NIGHT);
  break;

}

icons.play();

我可以解决这个问题并考虑完成这个项目，但我真的想知道为什么我不能在原始函数之外访问这个值。

为什么我不能将这个json变量存储在window对象中并在函数外部使用它？

0 个答案: