Question

我正在尝试设置38个动态创建的span元素的css color属性，这些元素填充了API JSON响应数据（实时证券交易所）。

.change的每个span元素都包含一个表示股价变化的数值。正如我们习惯的那样，这些变化指标中的每一个都应该以其值为条件具有某种颜色。含义，如果值＆lt;它应该显示为红色，如果值> 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>

Answer 1

我不认为在span标记的情况下，你会通过.val（）函数得到任何值。你需要使用.text（）函数，然后在Integer中转换值。请使用以下代码并检查它是否适合您 -

//添加颜色以指示股价变化

$(document).ready(function() {

setTimeout(function(){ 
  $('.change').each(function() {

if(parseInt($(this).text()) < 0) { $(this).css('color','#E60000'); }
else if(parseInt($(this).text()) > 0) { $(this).css('color','#32cd32'); }

});
  },2000);
});

Answer 2

当您打印值时，在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库进行无用且昂贵的调用（这对于mantainance和performance都很好）

Answer 3

在css下面添加以下自定义颜色

您还可以通过更改以下代码中的类颜色来测试所有可能的值。

.posClass {color : green;}
.negClass {color : red;}
.zerClass {color : black;}

替换此jquery代码，其中包含您提出的所有3个条件。

setTimeout(function(){ 
    $('.change').each(function() {
    var valChange   = $(this).text();
    var valClass    = "negClass";
        if(valChange == 0){
            valClass = "zerClass";
        }
        else if(valChange > 0){
            valClass = "posClass";
        }
    $(this).addClass(valClass);
    });
},1000);

如何着色分享价格变化：对动态创建的元素使用css（）方法？

3 个答案: