使用开关访问天气图标

Using switch to access weather icons

本文关键字：图标访问开关更新时间：2023-09-26

我正在尝试使用switch语句从http://simpleweatherjs.com/API访问https://erikflowers.github.io/weather-icons/的图标。

我想我已经正确设置了一切-我的CSS文件夹中有weather-icons.css文件，我也复制了字体文件夹。

当我console.log下面的代码时，它只返回默认的"温度计外部"情况。

function getTemp(currentLat,currentLong) {
  var getURL = 'https://simple-weather.p.mashape.com/weatherdata?lat=' + currentLat +'&lng=' + currentLong + '&deg=F';
$.ajax({
headers: {
  "X-Mashape-Key": "2lp07ix0Wbmshx4DT1QG8ZuPr3Ynp15ZORmjsnRTWmCuVL8gO1"
},
url: getURL,
success: function(response) {
  var json_obj = JSON.parse(response);
  var current = json_obj.query.results.channel.item;
  var temp = current.condition.temp;
  var condIcon = current.condition.code;
  var description = current.condition.text;
  var units = json_obj.query.results.channel.units;
  console.log(current);
  $(".temp").html(temp + ' ' + units.temperature);
  $(".description").html(description);
  switch (condIcon) {
    case 0:
      condIcon = 'tornado';
      break;
    case 1:
    case 2:
      condIcon = 'hurricane';
      break;
    case 3:
    case 4:
      condIcon = 'day-thunderstorm';
      break;
    case 5:
    case 6:
    case 7:
      condIcon = 'rain-mix';
      break;
    case 8:
    case 9:
      condIcon = 'showers';
      break;
    case 10:
    case 11:
    case 12:
      condIcon = 'rain';
      break;
    case 13:
    case 14:
    case 15:
    case 16:
      condIcon = 'snow';
      break;
    case 17:
    case 18:
      condIcon = 'hail';
      break;
    case 19:
      condIcon = 'dust';
      break;
    case 20:
    case 21:
      condIcon = 'fog';
      break;
    case 22:
      condIcon = 'smoke';
      break;
    case 23:
    case 24:
      condIcon = 'windy';
      break;
    case 25:
      condIcon = 'snowflake-cold';
      break;
    case 26:
      condIcon = 'cloudy';
      break;
    case 27:
    case 29:
      condIcon = 'night-cloudy';
      break;
    case 28:
    case 30:
      condIcon = 'day-cloudy';
      break;
    case 31:
      condIcon = 'night-clear';
      break;
    case 32:
      condIcon = 'day-sunny';
      break;
    case 33:
      condIcon = 'stars';
      break;
    case 34:
      condIcon = 'sunny';
      break;
    case 35:
      condIcon = 'rain-mix';
      break;
    case 36:
      condIcon = 'hot';
      break;
    case 37:
    case 38:
    case 39:
      condIcon = 'thunderstorm';
      break;
    case 40:
      condIcon = 'sprinkles';
      break;
    case 41:
    case 42:
      condIcon = 'snow';
      break;
    case 44:
      condIcon = 'day-cloudy';
      break;
    case 45:
      condIcon = 'thundershower';
      break;
    case 46:
      condIcon = 'snow';
      break;
    case 47:
      condIcon = 'storm-showers';
      break;
    case 3200:
      condIcon = 'thermometer-exterior';
      break;
    default:
      condIcon = 'thermometer-exterior';
}
// add the css prefix
condIcon = 'wi-' + condIcon;
// set the image
console.log(condIcon);
$('.icon i').addClass('wi').addClass(condIcon);
}
  });
}

这是怎么回事?API正在返回正确的天气代码-这是我的开关语句吗?当我的页面加载时，我也看不到图标。这是html -

<!doctype html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/weather.css">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="js/weather.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <div class="row">    
    <div class="col-md-12"><p>Local Weather</p></div>
    </div>
      <div class="row">
       <div class="col-md-12"><p class="location"></p></div>
   <div class="row">
    <div class="col-md-4"><p class="description"></p></div>
    <div class="col-md-4"> <p class="temp"></p></div>
    <div class="col-md-4"> <p class="icon"></p></div>
   <div class="row">
   </div>
  </div>
  </div>
</div>
</body>
</html>

谢谢!

确保condIcon值不是字符串，尝试使用

condIcon = parseInt(current.condition.code);