Modification de la couleur du texte avec CSS dans jQuery

Question

J'affiche les résultats d'un quiz et je veux qu'il affiche un vert correct ou un rouge incorrect à côté de la question correspondante. J'ai un fichier PHP contenant les questions, qui renvoie vrai ou faux selon que la réponse des utilisateurs était correcte ou non. Mon code ci-dessous montre comment mes résultats sont affichés (dans un tableau, avec vrai ou faux étant montré). J'ai essayé une instruction if pour dire si ce champ est vrai, le rendre vert, sinon rouge. Mais rien ne fonctionne. Je veux juste transformer 'vrai' en vert 'correct' et 'faux' en rouge incorrect en utilisant jQuery.

code JavaScript connexes:

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

code HTML connexe:

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

également 'extendedResults' est un tableau que chaque question et réponse choisie sont poussés à. Toute aide serait appréciée. Merci!

Answer 1

Essayez d'utiliser last:child Sélecteur - $("#tblextendedresults tbody tr:last-child td:last-child")

$(this) dans votre code ne renvoie pas l'élément approprié.

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>