使用开关访问天气图标
[英]Using switch to access weather icons
问题描述
I'm trying to use a switch statement to access the icons from https://erikflowers.github.io/weather-icons/ with the http://simpleweatherjs.com/ API. 
我正在尝试使用switch语句通过http://simpleweatherjs.com/ API从https://erikflowers.github.io/weather-icons/访问图标。
I think I have everything set up correctly - I have the weather-icons.css file in my CSS folder and I copied the font folder over as well. 我想我一切设置正确-我的CSS文件夹中有weather-icons.css文件，我也复制了字体文件夹。
When I console.log the code below, it only returns the default "thermometer-exterior" case. 当我在console.log下面的代码时，它仅返回默认的“体温计-外部”情况。
function getTemp(currentLat,currentLong) {
var getURL = 'https://simple-weather.p.mashape.com/weatherdata?lat=' + currentLat +'&lng=' + currentLong + '°=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);
}
});
}
What's going on here? 这里发生了什么？ The API is returning the correct weather code - is it my switch statement? API返回的天气代码正确-是我的switch语句吗？ I'm also not seeing the icon when my page loads. 页面加载时也没有看到该图标。 Here's the html - 这是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>
Thank you! 谢谢！
1 个解决方案
解决方案1
1 2016-11-01 04:25:26
确保condIcon值不是字符串，请尝试使用
condIcon = parseInt(current.condition.code);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.