php - 使用 jQuery 检查单选按钮的值并更改 CSS 类

Question

我正在做一个包含 100 个问题的多项选择测验(它在五个选项卡上显示 20 个问题)。如果人们可以通过页面源代码看到答案，那很好 - 这只是练习。

我目前拥有的是一个 php 数组(目前只有 5 个“测试”问题)，它显示带有问题的行、四个单选按钮和一个提交按钮。这个想法是用户阅读问题，选择答案并提交。如果答案正确，则单选按钮显示为绿色。如果错误，单选按钮变为红色，用户重试。

这是我的 PHP 代码的主要部分:

<?php
$set = array();

$set[] = array('q'=>'Question1','qurl'=>'001','ans'=>'zhidao','a'=>'zhidao','b'=>'zhidou','c'=>'zhedao','d'=>'zhedau');
$set[] = array('q'=>'Question2','qurl'=>'002','ans'=>'dajia','a'=>'dazha','b'=>'dajia','c'=>'taqia','d'=>'tazha');
$set[] = array('q'=>'Question3','qurl'=>'003','ans'=>'boduo','a'=>'bodou','b'=>'buoduo','c'=>'boduo','d'=>'buodo');
$set[] = array('q'=>'Question4','qurl'=>'004','ans'=>'wanhuan','a'=>'wanchuan','b'=>'wanhuan','c'=>'wanchun','d'=>'wachuan');
$set[] = array('q'=>'Question5','qurl'=>'005','ans'=>'zhangkou','a'=>'zhongkou','b'=>'zhangko','c'=>'zhangkuo','d'=>'zhangkou');

shuffle($set);
?>

   <form>
                <table>
                                                                                <tr class="q0">                     
                        <td><td><a class="question" href="#">Question goes here</a></td></td>
                        <td><input class="radiostyle" type="radio" name="answers" value ="zhidao" /> zhidao</td>
                        <td><input class="radiostyle" type="radio" name="answers" value ="zhidou" /> zhidou</td>
                        <td><input class="radiostyle" type="radio" name="answers" value ="zhedao" /> zhedao</td>
                        <td><input class="radiostyle" type="radio" name="answers" value ="zhedau" /> zhedau</td>
                        <td><input class="submit submit-0" type="submit" value="Submit" /></td>
                    </tr>

这是我的 jQuery:

function checkAnswer(set) {
if (set == 2) { /* if this is question set 2 out of the 5 kinds of questions */
        $('#questions .submit').click(function(e){
            var q = $(this).attr('class').split(' ')[1].split('-')[1];
            $('#questions .q'+q+' input').removeClass('radiowrong');
            var ans = $("input[@name=answers]:checked").val();
            if (ans == jset[q]['ans']) {
                $('#questions .q'+q+' .radiostyle').addClass('radioright');
                alert('correct!');}
            else {
                $('#questions .q'+q+' .radiostyle').addClass('radiowrong');}

            e.preventDefault();
        });
    }
}

现在，我并没有经常使用 jQuery，所以请认为我是初学者。如果我的代码看起来效率低下，我深表歉意。我对我的代码有两个主要问题:

首先，我很难让我的 checkAnswer 函数正常工作。我插入了一个警报，看看我的 if 逻辑是否正确，但我没有成功。关于如何让它工作的任何建议？

其次，如何修改我的 jQuery 以便正确更改单选按钮的类？同样，如果用户选择了正确的答案，我希望将单选按钮设为绿色，如果选择错误，则将其设为红色。

(请知道:如果有更简单的方法来向用户显示他们是对还是错，比如更改他们选择的答案的文本颜色，我洗耳恭听。真的任何东西都足够了。 )

如果我需要提供更多信息，请告诉我。

非常感谢。

Answer 1

首先，这是解决方案的一个工作示例 - jsfiddle.net/avrelian/hrnDG/2/ .

以下是您的标记的简化版本。您可能会看到我在这里使用了 label 标签。它对用户更友好，因为用户只需单击标签即可选中单选按钮。此外，label 的样式更简单(例如，在 Mac OS 上)。我使用“正确”和“错误”类来标记适当的答案元素。

<form>
<table>
<tr class="q1">                       
    <td><a class="question" href="#">What is my favorite language?</a></td>
    <td>
        <input class="radiostyle wrong" type="radio" name="answers" value="Java" id="answers_1_Java" />
        <label for="answers_1_Java">Java</label></td>
    <td>
        <input class="radiostyle right" type="radio" name="answers" value="JavaScript" id="answers_1_JavaScript" />
        <label for="answers_1_JavaScript">JavaScript</label></td>
    <td>
        <input class="radiostyle wrong" type="radio" name="answers" value="Ruby" id="answers_1_Ruby" />
        <label for="answers_1_Ruby">Ruby</label></td>
    <td>
        <input class="radiostyle wrong" type="radio" name="answers" value="C#" id="answers_1_C#" />
        <label for="answers_1_C#">C#</label></td>
    <td><input class="submit submit-1" type="submit" value="Submit" /></td>
    <td></td></tr></table></form>​

让我们将表示逻辑提取到 CSS 中。

input.right.checked + label {
    color: green;
}

input.wrong.checked + label {
    color: red;
}

最后，让我们为 submit 按钮设置一个处理程序。

$('.submit').click(function() {
    $(this).closest('tr')
        .find('[name="answers"]')
            .removeClass('checked')
        .filter(':checked')
            .addClass('checked');
    return false;
});​

N.B.:使用 CSS3 :checked 伪类可以更轻松地解决这个问题，因为您不需要提交按钮。请看例子 - jsfiddle.net/avrelian/hrnDG .

input.right:checked + label {
    color: green;
}

input.wrong:checked + label {
    color: red;
}