jQuery에서 CSS로 텍스트 색상 변경

Question

퀴즈 결과를 표시하고 해당 질문 옆에 녹색이 맞거나 빨간색이 틀리길 원합니다. PHP 파일을 질문을 들고, true 또는 false 사용자가 대답을 맞는지 여부에 따라 반환합니다. 내 코드는 내 결과가 어떻게 표시되는지 보여줍니다 (표에 true 또는 false가 표시됨). 해당 필드가 true이면 녹색으로, 그렇지 않으면 빨간색으로 if 문을 시도했습니다. 그러나 아무것도 작동하지 않습니다. 난 그냥 '사실'녹색으로 '올바른'및 '잘못된'빨간색 jQuery를 사용하여 잘못된 변환 할 싶어요.

관련 자바 스크립트 코드 :

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