温度天气颜色变化

时间:2016-04-06 08:57:25

标签: jquery css api wunderground

我从wundground完成了我的jQuery天气,我只想让温度变化的颜色自动更高或更低,这个代码我使用但我不知道如何在jQuery中使用CSS。

function check(temp_c) {
      if (temp_c < 1 && temp_c > 10)
        return '';
      else if (temp_c > 11.25 && temp_c < 33.75) {
        return '';
      } else if (temp_c > 33.75 && temp_c < 56.25) {
        return '';
      } else if (temp_c > 56.25 && temp_c < 78.75) {
        return '';
      } else if (temp_c > 78.75 && temp_c < 101.25) {
        return '';
      } else if (temp_c > 101.25 && temp_c < 123.75) {
        return '';
      } else if (temp_c > 123.75 && temp_c < 146.25) {
        return '';
      } else if (temp_c > 146.25 && temp_c < 191.25) {
        return '';
      } else if (temp_c > 191.25 && temp_c < 213.75) {
        return '';
      } else if (temp_c > 213.75 && temp_c < 236.25) {
        return '';
      } else if (temp_c > 236.25 && temp_c < 258.75) {
        return '';
      } else if (temp_c > 258.75 && temp_c < 281.25) {
        return '';
      } else if (temp_c > 281.25 && temp_c < 303.75) {
        return '';
      } else if (temp_c > 303.75 && temp_c < 326.25) {
        return '';
      } else {
        return '';
      }
    }


var temp_c = data.current_observation.temp_c ;
var temperature = check(temp_c );

1 个答案:

答案 0 :(得分:3)

您可以通过检查温度的上限并让控件通过每个条件来设置最高值来简化代码。像这样:

function check(temp) {
    temp = parseFloat(temp);
    var tempClass = 'gt326'; // default class for > 326        
    if (temp < 326.25) tempClass = 'lt326'; 
    if (temp < 303.75) tempClass = 'lt303';
    if (temp < 281.25) tempClass = 'lt281';
    // and so on...

    return tempClass;
}

从那里你可以使用addClass()方法设置返回的类:

var temp_c = data.current_observation.temp_c ;
var tempClass = check(temp_c);
$('#myElement').addClass(tempClass);

Working example