Jquery 根据温度范围更改背景颜色

我从Weather Underground获得了一些API信息，我想知道是否可以使用API提供的信息通过jQuery更改整个

主体的背景颜色

我想做的是根据通过API返回的特定温度范围，在
body
标记上设置一个类。例如：

"current_observation": {
    "image": {
    "url":"http://icons-ak.wxug.com/graphics/wu2/logo_130x80.png",
    "title":"Weather Underground",
    "link":"http://www.wunderground.com"
    },
    "display_location": {
    "full":"Bowling Green, KY",
    "city":"Bowling Green",
    "state":"KY",
    "state_name":"Kentucky",
    "country":"US",
    "country_iso3166":"US",
    "zip":"42101",
    "latitude":"37.02899933",
    "longitude":"-86.46366119",
    "elevation":"154.00000000"
    },
    "observation_location": {
    "full":"Ridgeview Drive, Bowling Green, Kentucky",
    "city":"Ridgeview Drive, Bowling Green",
    "state":"Kentucky",
    "country":"US",
    "country_iso3166":"US",
    "latitude":"36.993744",
    "longitude":"-86.522827",
    "elevation":"714 ft"
    },
    "estimated": {
    },
    "station_id":"KKYBOWLI7",
    "observation_time":"Last Updated on May 24, 2:25 PM CDT",
    "observation_time_rfc822":"Thu, 24 May 2012 14:25:18 -0500",
    "observation_epoch":"1337887518",
    "local_time_rfc822":"Thu, 24 May 2012 14:25:29 -0500",
    "local_epoch":"1337887529",
    "local_tz_short":"CDT",
    "local_tz_long":"America/Chicago",
    "local_tz_offset":"-0500",
    "weather":"Clear",
    "temperature_string":"86.8 F (30.4 C)",
    "temp_f":86.8

这是我正在收集的一些信息。最后一个
temp\u f
是我想重点关注的

范围的一个例子是-80到90应该显示
background:#dd7f35

我曾尝试为此设置自定义变量，但最终总是会破坏一些东西。我似乎不知道如何使用从JSON中提取的信息设置变量（如果可能的话，因为
temp\u f
使用小数）

下面是我如何调用JSON的

$().ready(function(){ 
    $.getJSON("http://api.wunderground.com/api/[MY API KEY]/conditions/q/autoip.json?callback=?",
    function(data){
        $.each(data, function(i, json) {
        content = '<h1>' + json.icon + '</h1>';
        content += '<img src=' + json.icon_url +'>';
        content += '<p>' + json.temp_f + '<p>';
        $(content).appendTo("#area");
        });
    console.log(data)
    });
});

我使用了
+json.temp\u f+
，因为对于常规HTML来说，这可以很好地使用temp，但我可以假设在这种情况下这不起作用

非常感谢您的帮助

 var backDrop = json.temp_f;

只要去掉引号和加号就行了

或者你可以这样做：

 var colorOutput = '';

 if(json.temp_f < 20){
     colorOutput = 'blue'; //use hex color
 }else if(json.temp_f >=20 && json.temp_f < 60){
     colorOutput = 'orange'; //use hex color
 }

 $('#colorMeElement').css('background',colorOutput);

var colorOutput=''；
如果（json.temp_f<20）{
colorOutput='blue'；//使用十六进制颜色
}else if（json.temp_f>=20&&json.temp_f<60）{
colorOutput='orange'；//使用十六进制颜色
}
$（'colorMeElement'）.css（'background'，colorOutput）；
为每个范围颜色组合设置CSS样式，例如.range_80_90，其背景为：#dd7f35。然后，您可以在脚本中动态创建类并将其应用于适当的元素。
这样，然后只需将类添加到body中，就像这样
$（body）.addClass（'.range_80_90'）好的，谢谢@IsNull是有意义的，而且比我一直尝试的方法简单得多。谢谢。@IsNull——我一直在尝试，但似乎无法让它工作。我已经设置了所有样式，但无法将类添加到
正文中。你能举个例子吗？一个普通的jQuery.addClass应该可以做到这一点：
$（body.addClass（'.range_80_90'）
 var colorOutput = '';

 if(json.temp_f < 20){
     colorOutput = 'blue'; //use hex color
 }else if(json.temp_f >=20 && json.temp_f < 60){
     colorOutput = 'orange'; //use hex color
 }

 $('#colorMeElement').css('background',colorOutput);