1

編集：最新のプロジェクトをすべて表示するダッシュボードを会社用に作成しています。私はアプリケーション開発チームのインターンです。ダッシュボードには、プロジェクトとその最新のビルドの名前、およびそれらのビルドのステータスが表示されます。

SUCCESS、FAILURE、ERROR、UNKNOWNの間で変化する動的な文字列を使用しています。これらの文字列は、td class="status"を使用してHTMLで表示されます。ステータスは、プロジェクトのビルドが失敗したか成功したかに基づいて変更できます。SUCCESSは緑、FAILUREは赤、その他はすべて黒である必要があります。テーブルを作成する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);
            }
4

4 に答える 4

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);
于 2012-05-08T13:30:49.887 に答える
1

それをちょっとした機能に移します

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/

于 2012-05-08T13:32:12.743 に答える
0

JavaScriptstyle関数を使用してそれを行うことができます：EX：

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

またはjqueryを使用します：

 $('#yourid').css('color','red');
于 2012-05-08T13:29:48.390 に答える
0

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
于 2012-05-08T13:27:01.090 に答える