JavaScript或jQuery的在JSP

Question

我在做一個在線考試網站多種形式。在jsp中我們有許多由for循環創建的表單。每個表格有1個選擇題和4個答案。

我寫了使用jquery檢查wheter用戶進行對錯這個問題的腳本。

for (int i = 0; i < NumofQuestions; i++) { 
    Question q = (Question) exam.get(i); %> 

    <form> 
     <p><b>Question <%=i+1%>: </b> <%=q.getContent()%></p> 
     <p><b>A. </b><input type="radio" name="answer" value="A"><%=q.getAnswerA()%><br></p> 
     <p><b>B. </b><input type="radio" name="answer" value="B"><%=q.getAnswerB()%><br></p> 
     <p><b>C. </b><input type="radio" name="answer" value="C"><%=q.getAnswerC()%><br></p> 
     <p><b>D. </b><input type="radio" name="answer" value="D"><%=q.getAnswerD()%><br></p> 
    </form> 

    <span id="result"></span> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $("form").on('click',function() { 
      $this = $(this); 
      var value = $this.find('input:radio[name=answer]:checked').val(); 
      var correct = "<%=q.getAnswer()%>"; 

      if (value == correct) { 
       $('#result').html('right'); 
      } else { 
       $('#result').html('wrong'); 
      } 
     }); 
    </script> 
<% } %> 

雖然腳本包含在for循環，但變量correct總是返回列表exam的最後一個元素。意思q.getAnswer()總是得到最後一個問題的答案，而不是正在做的問題。有什麼方法可以解決這個問題嗎？

Answer 1

正確答案添加到窗體的數據屬性，如果你不小心查看源代碼將顯示它。否則，你需要ajax到服務器才能得到答案。 $（「形式」）將得到網頁上的所有表格和你的jQuery，包括爲每一個形式，你的循環

或者有一個表格多個無線電其中，各組都有自己的名字。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(function() { 
    $("#formContainer").on("click","input:radio[name=answer]", function() { 
     var value = this.value, // always the checked value 
      $form = $(this).closest("form"), 
      correct = $form.data("correct"); 
     $form.next().html(value == correct ? 'right' : 'wrong'); 
     $("#score").html($(".result:contains('right')").length); 
    }); 
    }); 
</script> 

<div id="formContainer"> 
for (int i = 0; i < NumofQuestions; i++) { Question q=(Question) exam.get(i); %> 

    <form data-correct="<%=q.getAnswer()%>"> 
    <p><b>Question <%=i+1%>: </b> 
     <%=q.getContent()%> 
    </p> 
    <p><b>A. </b> 
     <input type="radio" name="answer" value="A"> 
     <%=q.getAnswerA()%> 
     <br> 
    </p> 
    <p><b>B. </b> 
     <input type="radio" name="answer" value="B"> 
     <%=q.getAnswerB()%> 
     <br> 
    </p> 
    <p><b>C. </b> 
     <input type="radio" name="answer" value="C"> 
     <%=q.getAnswerC()%> 
     <br> 
    </p> 
    <p><b>D. </b> 
     <input type="radio" name="answer" value="D"> 
     <%=q.getAnswerD()%> 
     <br> 
    </p> 
    </form> 
    <span class="result"></span> 

    <% } %> 
</div> 
<span id="score"></span>