Ändern der Textfarbe mit CSS in jQuery

Question

Ich zeige Ergebnisse eines Quiz an und möchte, dass es ein grünes richtiges oder ein rotes falsches neben der entsprechenden Frage zeigt. Ich habe eine PHP-Datei, die die Fragen enthält, die wahr oder falsch zurückgibt, abhängig davon, ob die Benutzer richtig waren oder nicht. Mein Code unten zeigt, wie meine Ergebnisse angezeigt werden (in einer Tabelle, wobei "True" oder "False" angezeigt wird). Ich habe eine if-Anweisung ausprobiert, um zu sagen, ob dieses Feld wahr ist, mach es grün, sonst rot. Aber nichts funktioniert. Ich möchte nur 'wahr' in ein grünes 'richtig' und 'falsch' in ein rotes falsches verwandeln, indem ich jQuery benutze.

Verwandte JavaScript-Code:

$("#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"); 
    } 
}) 

Verwandte HTML-Code:

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

Auch 'extendedResults' ist ein Array, dass jede Frage und Antwort gewählt werden geschoben. Jede Hilfe wäre willkommen. Vielen Dank!

Answer 1

Versuchen last:child Selector - $("#tblextendedresults tbody tr:last-child td:last-child")

$(this) in Ihrem Code bezieht sich nicht das entsprechende Element.

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>