jquery - 如何根据数字前面是 "+"还是 "-"来设置数字的字体颜色？

Question

我正在创建一个股票小部件。如果 Change 或 Changeinpercent 列中的值发生变化，我希望能够将字体颜色设置为红色表示 (-) 减少或绿色表示 (+) 和增加值。

这是我目前得到的:http://jsfiddle.net/thetuneupguy/r2Bca/

$(function() {
    $.getJSON('http://query.yahooapis.com/v1/public/yql?q=SELECT%20*%20FROM%20yahoo.finance.quotes%20WHERE%20symbol%20in(%22GCF14.CMX%22%2C%22SIF14.CMX%22%2C%22PAH14.NYM%22%2C%22PLF14.NYM%22)&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=', function(data) {
    console.log("data: ", data);
    console.log(data.query.results.quote);
    $.each(data.query.results.quote, function(key, obj){
        var $tr = $('<tr/>', {'class': 'my-new-list'}).appendTo('#blk-1 table');            
        $tr.append($('<td/>').text(obj.Name || "--"));
        $tr.append($('<td/>').text(obj.Ask || "--"));
        $tr.append($('<td/>').text(obj.Bid || "--"));
        $tr.append($('<td/>').text(obj.Change || "--"));
        $tr.append($('<td/>').text(obj.ChangeinPercent || "--"));
        });

    });
});

Answer 1

首先，添加这两个 css 规则:

.increase{
    color:green;    
}
.decrease{
    color:red;
}

然后，代替:

$tr.append($('<td/>').text(obj.ChangeinPercent || "--"));

你应该这样做:

var $td = $('<td/>').text(obj.ChangeinPercent || "--");    
if(/^\+/.test(obj.ChangeinPercent || '')) $td.addClass("increase");  //If it starts with '+', make it green    
if(/^-/.test(obj.ChangeinPercent || '')) $td.addClass("decrease");  //If it starts with '-', make it red
$tr.append($td);

此处演示:http://jsfiddle.net/edgarinvillegas/r2Bca/3/