Question

我正在从天气地下获取一些 API 信息, 并想知道是否有可能使用 API 提供的信息, 通过 jQuery 改变整个 < code>body 的背景颜色。

我想在 body 标签上设置一个类, 以通过 API 返回的一定范围的温度为基础。例如 :

"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_f 。

区域示例是 - 80 - 90 显示 backround: #dd7f35

我试图为此设置自定义变量, 但总是会破坏事物。我似乎无法找到如何使用从 JSON 中提取的信息设置变量( 如果可能的话, 因为 < code> temp_f < /code > 使用小数。 )

我是这样称呼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)
    });
});

这是我尝试过的东西

var backDrop =   + json.temp_f +

我用了,因为对于普通的 HTML 来说,这只是暂时的罚款, 但我可以假设,在这种情况下是行不通的?

非常感谢任何帮助。

Answer 1

 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);

Answer 2

为每种区域- 颜色组合设置 CSS 样式, 例如背景为 #dd7f35 的.range_ 80_ 90。然后您可以在脚本中动态创建类并将其应用到合适的元素。

友情链接