我正在创建一个功能，允许用户使用单选按钮选择答案。选择所有答案后，用户点击提交，答案标签会显示以下3种情况：
我无法实现上述逻辑，并怀疑我调用的类名错误！ 请给我一个解决方案，谢谢！
这是我的代码
@using WebToeic.WebAppMVC.ViewModels
@model GetDoListenVM
@{
Layout = "~/Views/Shared/_Layout.cshtml";
ViewData["Title"] = "Exam";
}
<section class="section">
<div class="container">
<div class="row">
<div class="col-lg-10 col-md-12 col-sm-12 col-xs-12">
<form method="post" asp-action="DoListen" asp-controller="UserListen" id="listenForm">
@if (Model != null && Model.listenQuestions != null)
{
@foreach (var item in Model.listenQuestions)
{
<div class="question">
<div class="question-wrapper mb-4">
<div class="row" style="background-color: lightgray;">
@if (item.AudioL != null)
{
<div class="col-md-12">
<audio controls style="margin-top: 10px;">
<source src="~/uploadsAudioListen/@item.AudioL" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
}
</div>
<div class="row" style="background-color: lightgray;">
<div class="col-md-6">
<p class="font-weight-bold h5">Question @item.Order . @item.Question</p>
</div>
@if (item.Photo != null)
{
<div class="col-md-6" style="background-color: lightgray;">
<img src="~/uploadsImageListen/@item.Photo" alt="Question Image" class="img-fluid">
</div>
}
</div>
<div class="row justify-content-start">
<div class="col-md-12">
<h4>Answers:</h4>
</div>
</div>
<div class="row justify-content-start">
<div class="col-md-12">
<div class="form-check">
<input class="form-check-input ml-1 answer" type="radio" name="userAnswers[@item.Id]" id="[email protected]" value="A" data-CorrectAnswer="A">
<label class="form-check-label h5 correct-answer-label" for="[email protected]">
@item.Answer1
</label>
</div>
</div>
</div>
<div class="row justify-content-start">
<div class="col-md-12">
<div class="form-check">
<input class="form-check-input ml-1 answer" type="radio" name="userAnswers[@item.Id]" id="[email protected]" value="B" data-CorrectAnswer="B">
<label class="form-check-label h5 correct-answer-label" for="[email protected]">
@item.Answer2
</label>
</div>
</div>
</div>
<div class="row justify-content-start">
<div class="col-md-12">
@if (item.Answer3 != null)
{
<div class="form-check">
<input class="form-check-input ml-1 answer" type="radio" name="userAnswers[@item.Id]" id="[email protected]" value="C" data-CorrectAnswer="C">
<label class="form-check-label h5 correct-answer-label " for="[email protected]">
@item.Answer3
</label>
</div>
}
</div>
</div>
<div class="row justify-content-start">
<div class="col-md-12">
@if (item.Answer4 != null)
{
<div class="form-check">
<input class="form-check-input ml-1 answer" type="radio" name="userAnswers[@item.Id]" id="[email protected]" value="D" data-CorrectAnswer="D">
<label class="form-check-label h5 correct-answer-label" for="[email protected]">
@item.Answer4
</label>
</div>
}
</div>
</div>
<div class="row justify-content-start">
<div class="col-md-12">
<div class="explanation" hidden>
Lời giải thích: @item.Explain
</div>
</div>
</div>
</div>
</div>
}
}
<button id="submitBtn" type="submit" class="btn btn-primary">Submit</button>
<!-- Kết quả -->
<div id="resultDiv" hidden>
<h3>Result</h3>
<div id="correctCount"></div>
</div>
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
$('#listenForm').submit(function (event) {
event.preventDefault();
var formData = new FormData(this);
// Gửi dữ liệu đến server
$.ajax({
url: '@Url.Action("DoListen", "UserListen")', // Địa chỉ URL xử lý dữ liệu ở phía server
type: 'POST', // Phương thức gửi dữ liệu là POST
processData: false, // Kiểu dữ liệu gửi đi là JSON
contentType: false,
data: formData,//JSON.stringify(userAnswers)//, // Dữ liệu gửi đi được chuyển thành chuỗi JSON
success: function (result) {
// Xử lý kết quả trả về từ server Hiển thị kết quả
$("#resultDiv").removeAttr("hidden");;
$("#correctCount").text("Correct: " + result.correctCount);
// Hiển thị dấu tick và dấu X result.answers,
$.each(result.answers, function (index, item) {
var questionDiv = $(".question").eq(index);
//var questionDiv = $(this);
var selectedAnswer = questionDiv.find("input[type='radio']:checked");
//var correctAnswer = questionDiv.find("input[type='radio'][value='" + item.CorrectAnswer + "']");
//var correctAnswer = questionDiv.find("input[type='radio'][name='" + userAnswers[item.QuestionId] + "'][value='" + item.CorrectAnswer + "']");
var correctAnswer = questionDiv.find("input[type='radio'][data-CorrectAnswer='" + item.CorrectAnswer + "']");
if (selectedAnswer.length > 0) {
if (selectedAnswer.val() === item.CorrectAnswer) {
//correctAnswer.closest(".question").find("label.answer").css("color", "blue");
//selectedAnswer.siblings("label.answer").css("color", "blue");
correctAnswer.next("label.correct-answer-label").css("color", "blue");
} else {
selectedAnswer.siblings("label.answer").css("color", "red");
//correctAnswer.closest(".question").find("label.answer").css("color", "blue");
correctAnswer.next("label.correct-answer-label").css("color", "blue");
//correctAnswer.siblings("label.answer").css("color", "blue");
}
} else {
//correctAnswer.siblings("label.answer").css("color", "blue");
//correctAnswer.closest(".question").find("label.answer").css("color", "blue");
correctAnswer.next("label.correct-answer-label").css("color", "blue");
}
// Hiển thị phần giải thích
questionDiv.find(".explanation").removeAttr("hidden");;
});
},
error: function (xhr, status, error) {
// Xử lý lỗi nếu có
}
});
});
});
</script>
<hr class="invis">
</div><!-- end col -->
</div><!-- end row -->
</div><!-- end container -->
</section>
asp.net core 中响应 json 的命名约定是 camel case 而不是 pascal case。
您可以添加
console.log(result)Console您需要将代码
item.CorrectAnsweritem.correctAnswervar correctAnswer = questionDiv.find("input[type='radio'][data-CorrectAnswer='" + item.correctAnswer + "']");
if (selectedAnswer.length > 0) {
if (selectedAnswer.val() === item.correctAnswer) {
顺便说一句，你说如果答案不正确，它需要变成红色，我从来没有找到带有类答案的标签，不确定你是否做了任何其他操作来更改类名。如果不是的话，应该是
correct-answer-label更改代码：
selectedAnswer.siblings("label.answer").css("color", "red")
致：
selectedAnswer.siblings("label.correct-answer-label").css("color", "red")