Question

编辑：我正在为我的公司创建一个显示所有最新项目的仪表板。我是应用程序开发团队的实习生。仪表板显示项目的名称及其最新版本，以及这些版本的状态。

我正在使用在SUCCESS，FAILURE，ERROR和UNKNOWN之间切换的动态字符串。这些字符串使用td class =“status”以HTML格式显示。状态可以根据项目构建失败还是成功而更改。成功应为绿色，失败应为红色，其他所有应为黑色。我有一个for循环创建表。

我正在尝试使用switch语句，使用javascript函数.fontcolor（）根据字符串的内容更改字体颜色。该字符串将从status.status

中提取

目前，所有内容都在屏幕上正常显示，但字体颜色实际上并未发生变化。我也没有收到任何错误。

for (var i in buildstatuses) {
                var status = buildstatuses[i];


                switch (status.status) {
                    case "SUCCESS":
                        status.status.fontcolor("green")
                        break;
                    case "FAILURE":
                        status.status.fontcolor("red")
                        break;
                    default:
                        status.status.fontcolor("black")
                        break;
                }

                $("tr#" + status.id + " td.status").html(status.status)

                if (status.status != "SUCCESS") {

                    var row = $("tr#" + status.id)


                           row.parent().parent().parent().parent().parent().removeClass("dashboard-success").addClass("dashboard-fail");

                    row.parent().parent().prepend(row.clone());  // Places Failure at the top by cloning then removing
                    row.remove();

                }
                $("tr#" + status.id + " td.date").html(status.date)
                console.log(status.id);
            }

Answer 1

我认为你只想改变内联的css颜色：

var statusColor = 'black';
switch (status.status) {
  case "SUCCESS":
    statusColor = "green";
    break;
  case "FAILURE":
    statusColor = "red";
    break;
  default:
    statusColor = "black";
    break;
 }

 $("tr#" + status.id + " td.status").html(status.status).css('color', statusColor);

Answer 2

我会将其转移到一个小功能

function ChangeColor(result)
{
    var item=$(".status");
    if(result=="SUCCESS")
        item.css("color","green");
    if(result=="FAILURE")
        item.css("color","red");    
}

你可以这样称呼它

ChangeColor("FAILURE");

或

ChangeColor("SUCCESS");

所以在你的代码中，

for (var i in buildstatuses) {
    var status = buildstatuses[i];
    ChangeColor(status.status);

   //your remaining code to do whatver you want after changing the color
}

示例：http://jsfiddle.net/gVV3U/3/

Answer 3

您没有在HTML中使用颜色..

更改

$("tr#" + status.id + " td.status").html(status.status)

到

$("tr#" + status.id + " td.status")
        .html(status.status) // set text
        .css({color: status.status.fontcolor}); // set color

Answer 4

您可以使用JavaScript style函数执行此操作：EX：

document.getElementById('yourId').style.color = 'red';

或使用jquery：

 $('#yourid').css('color','red');

如何使用JavaScript更改字符串字体颜色

4 个答案: