javascript - 有条件地更改通过 jquery 生成的 div 的 CSS

Question

我有一些具体的问题，但我希望有人能帮助我。

我基本上是用数组中的名称和 API 中的数字填充一个 div (id = 'content')。这部分没问题，div 附加了正确的内容。但是，我现在正在尝试为该内容设置样式，但事实证明这更加困难。

我想做的是只让数字根据它们的高度改变颜色。我的想法是通过 jquery 在数字周围生成一个 span 标记，然后在生成后编辑这个 span 的 css 来做到这一点。不幸的是，这似乎不起作用，我想知道是将功能拆分还是使用完全不同的方法更好？

非常欢迎任何建议!

代码如下:

var cities = ['London', 'New York', 'Beijing', 'Shanghai', 'Tokyo', 'Rotterdam', 'Seoul', 'Paris', 'Hong Kong']

function colors(x, y) {
  if (x <= 50) {
    $('#'+ y).css({
      'color': 'lime',
    });
  } else if (x >= 51 && x <= 120) {
    $('#'+ y).css({
      'color': 'orange',
    });
  } else {
    $('#'+ y).css({
      'color': 'red',
    });
  }
}


function getAqi(z) {
	z = z.replace(/\s/g, '')
	var URL = "https://api.waqi.info/feed/location/?token=1f3f4bd260b5067cd3a4397ae81ac18a1e03f246"
  var URL = URL.replace("location", z)
	$.getJSON(URL, function(obj) {
    var num = obj.data.aqi;
    var numstring = num.toString();
    var span = "<span id="+z+">" + numstring + "</span>"
    colors(num, z)
    $('#content').append(z + '&nbsp;');
    $('#content').append(span + '&nbsp;' + "|" + '&nbsp;');
  });
}

var i = 0;
for (;cities[i];) {
	var city = cities[i]
  getAqi(city);
  i++
}

body {
  font-family: helvetica, sans-serif;
  font-weight: 300;
  font-style: italic;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content"></div>

Answer 1

调用colors()在 $('#content').append(span + ' ' + "|" + ' ') 之后

var cities = ['London', 'New York', 'Beijing', 'Shanghai', 'Tokyo', 'Rotterdam', 'Seoul', 'Paris', 'Hong Kong']

function colors(x, y) {
  if (x <= 50) {
    $('#' + y).css({
      'color': 'lime',
    });
  } else if (x >= 51 && x <= 120) {
    $('#' + y).css({
      'color': 'orange',
    });
  } else {
    $('#' + y).css({
      'color': 'red',
    });
  }
}


function getAqi(z) {
  z = z.replace(/\s/g, '')
  var URL = "https://api.waqi.info/feed/location/?token=1f3f4bd260b5067cd3a4397ae81ac18a1e03f246"
  var URL = URL.replace("location", z)
  $.getJSON(URL, function(obj) {
    var num = obj.data.aqi;
    var numstring = num.toString();
    var span = "<span id=" + z + ">" + numstring + "</span>"
    $('#content').append(z + '&nbsp;');
    $('#content').append(span + '&nbsp;' + "|" + '&nbsp;');
    colors(num, z);
  });
}

var i = 0;
for (; cities[i];) {
  var city = cities[i]
  getAqi(city);
  i++
}

body {
  font-family: helvetica, sans-serif;
  font-weight: 300;
  font-style: italic;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content"></div>