1

bodyWeather Underground からいくつかの API 情報を取得しており、API によって提供される情報を使用して、jQuery を使用して全体の背景色を変更できないか疑問に思っていました。

私がやりたいことは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 が表示されますbackground:#dd7f35

このためにカスタム変数を設定しようとしましたが、常に問題が発生します。temp_fJSONから引き出された情報を使用して変数を設定する方法を理解できないようです（小数を使用しているため、可能であれば）。

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 の場合は問題なく一時データを取得できるので使用+ json.temp_f +しましたが、この場合はうまくいかないと思いますか?

どんな助けでも大歓迎です。

4

2 に答える 2

2 
 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);
于 2012-05-24T21:03:19.037 に答える
1

background：＃dd7f35を持つ.range_80_90のように、範囲と色の組み合わせごとにCSSスタイルを設定します。次に、スクリプトでクラスを動的に作成し、それを適切な要素に適用できます。

于 2012-05-24T21:05:09.510 に答える