使用開關訪問天氣圖標

我試圖使用switch語句從https://erikflowers.github.io/weather-icons/與http://simpleweatherjs.com/ API訪問圖標。使用開關訪問天氣圖標

我想我已經正確設置了一切 - 我的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正在返回正確的天氣代碼 - 它是我的switch語句嗎？我的網頁加載時也沒有看到圖標。這裏的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>

謝謝！

來源

2016-11-01 aww

CONSOLE.LOG condIcon您的開關語句之前，看看有什麼值你得到 –

它提供了正確的天氣代碼。例如，現在我得到33爲「夜間部分多雲」 – aww

確保condIcon值不是一個字符串，請嘗試使用

condIcon = parseInt(current.condition.code);

來源

2016-11-01 04:25:26

我測試了這一點，並可以確認這是問題。 –

另外我想編輯你的答案，但我不能因爲編輯太小，但我認爲它也會更好地包含基數，所以'condIcon = parseInt（current.condition.code，10）'..無論如何，儘管它通常會以base10爲基礎，但要確保包含最佳做法是很好的。 –

使用開關訪問天氣圖標

回答

相關問題