我正在尝试设置38个动态创建的span元素的css color属性，这些元素使用API JSON响应数据（实时股票交易）填充。
每个带有.change的span元素都包含一个指示股价变化的数值。
正如我们习惯的那样，这些变化指示器中的每一个都应根据其值具有某种颜色。意思是，如果值 0则应显示为绿色，如果值= 0，则不应采取任何措施。
在我的jQuery脚本中，API请求工作正常，我仅将其作为相关上下文包含在内。我的问题是.change元素的内部html的后续着色，实际上应根据上述规则着色。
我猜css（）方法无法正常工作，因为页面DOM准备好后，JSON数据已被拉入文档中。在这种情况下，实现适当的回调应该可以完成这项工作，但是我不确定如何做到这一点。关于此方法或其他解决着色问题的方法的任何建议将非常有帮助！
请在下面查看我的代码。感谢您的任何建议！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style type='text/css'>
#magic-line {font-size: 90%;}
#gse-primer {padding: 0; text-align: center;}
#gse-wrapper {overflow: hidden;}
.stocks {display: inline-block; width: 120px; text-align: center;}
#gse {animation-name: slide; animation-duration: 90s; animation-iteration- count: infinite; animation-timing-function: linear; white-space: nowrap;}
@keyframes slide {from {margin-left: 0px;} to {margin-left: -4560px;}}
</style>
</head>
<body>
<div id='magic-line' class='col-xs-12'>
<div id='gse-primer' class='hidden-xs col-sm-2'>Share Price:<br>Vol. Traded</div>
<div id='gse-wrapper' class='col-sm-10'><span id='gse'></span></div>
</div>
<!-- jQuery Google CDN -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type='text/javascript'>
// API request for stock data
$(document).ready(function() {
$.getJSON("http://dev.kwayisi.org/apis/gse/live?callback=?", function(data) {
console.log(data);
$.each(data, function(i, value) {
$("#gse").append("<div class='stocks'>" + " " + "<b>" + value.name + "</b>" + " " + value.price + " " + "<span class='change'>" + value.change + "</span>" + "<br>" + value.volume + "</div>");
});
});
});
// adding color to indicate changes in share prices
$(document).ready(function() {
$('.change').each(function(i, obj) {
if ($(this).val() < 0) { $(this).css('color','#E60000'); }
else if ($(this).val() > 0) { $(this).css('color','#32cd32'); }
else { };
});
});
</script>
</body>
</html>
最佳答案
当您打印值时，在span元素中添加一个属性
<span class='change' data-change='" + value.change + "'>" + value.change + "</span>
因此在
CSS中使用属性选择器可以正确设置元素的样式[data-change] { /* color for positive values */ }
[data-change="0"] { /* color for zero value */ }
[data-change^="-"] { /* color for negative values */ }
Codepen Demo
这样一来，您就可以将样式部分与javascript部分分离开来，并且可以避免对jQuery库的无用且昂贵的调用（这对维护和性能都有利）