jQueryのCSSでテキストの色を変更する

Question

クイズの結果を表示していて、対応する質問の横に緑色の正しいか赤色の誤りが表示されます。私は質問を保持しているPHPファイルを持っていますが、ユーザーの答えが正しいかどうかに応じてtrueまたはfalseを返します。以下の私のコードは、私の結果がどのように表示されるかを示しています（テーブルにtrueまたはfalseが表示されています）。私はif文を試して、そのフィールドがtrueの場合は緑、それ以外の場合は赤とします。しかし、何も動作しません。私はちょうどjQueryを使用して、 '真'を緑の '正解'に、 '偽'を赤の誤ったものに変換したいとします。

関連するJavaScriptコード：

$("#tblextendedresults tbody").prepend("<br>") 
$.each(extendedResults, function(i) { 
    $("#tblextendedresults tbody").append("<tr><td>" + extendedResults[i]["question"] + "</td><td>" + extendedResults[i]["your_answer"] + "</td><td>" + extendedResults[i]["correct"] + "</td></tr>") 
    if (extendedResults[i]["correct"] == "true") { 
     $(this).css("color", "green"); 
    } 
    else { 
     $(this).css("color", "red"); 
    } 
}) 

関連HTMLコード：

<table id="tblextendedresults"> 
    <thead> 
     <th>Question</th> 
     <th>Your answer</th> 
     <th>Correct?</th> 
    </thead> 
    <br> 
    <tbody></tbody> 
</table> 

また 'extendedResults' はそれぞれ質問と選ばれた解答がにプッシュされていることを配列です。 ご協力いただければ幸いです。ありがとう！

Answer 1

last:childセレクタを使用してみてください - $("#tblextendedresults tbody tr:last-child td:last-child")

$(this)あなたのコードには、適切な要素を指すものではありません。

JSFiddle

var extendedResults = [{ 
 
    "question": "Question1", 
 
    "your_answer": "your_answer1", 
 
    "correct": true 
 
}, { 
 
    "question": "Question2", 
 
    "your_answer": "your_answer2", 
 
    "correct": false 
 
}, { 
 
    "question": "Question3", 
 
    "your_answer": "your_answer3", 
 
    "correct": true 
 
}]; 
 

 
$("#tblextendedresults tbody").prepend("<br>") 
 

 
$.each(extendedResults, function(i) { 
 
    $("#tblextendedresults tbody").append("<tr><td>" + extendedResults[i]["question"] + "</td><td>" + extendedResults[i]["your_answer"] + "</td><td>" + extendedResults[i]["correct"] + "</td></tr>") 
 

 
    if (extendedResults[i]["correct"] == true) { 
 
    $("#tblextendedresults tbody tr:last-child td:last-child").css("color", "green").html("Correct"); 
 
    } else { 
 
    $("#tblextendedresults tbody tr:last-child td:last-child").css("color", "red").html("Incorrect"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<table id="tblextendedresults"> 
 
    <thead> 
 
    <th>Question</th> 
 
    <th>Your answer</th> 
 
    <th>Correct?</th> 
 
    </thead> 
 
    <br> 
 
    <tbody></tbody> 
 
</table>