使用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 。 它更加用戶友好，因為用戶只需單擊標簽即可檢查單選按鈕。 此外，標簽更加簡單（例如，在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;
});​

注意：使用CSS3 :checked偽類可以更輕松地解決方案，因為您不需要提交按鈕。 請參見示例 - jsfiddle.net/avrelian/hrnDG 。

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

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