使用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函數正常工作。我插入了一個警報，看看我的邏輯是否正確，但我沒有成功。關於如何讓這個工作的任何建議？

二，如何修改我的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; 
});​ 

N.B：該解決方案甚至可以用CSS3 :checked僞類更容易，因爲你有沒有必要提交按鈕。請參閱示例 - jsfiddle.net/avrelian/hrnDG。

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

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