JSP + Динамический CSS при нажатии кнопки

Question

Я пытаюсь создать страницу jsp, которая генерирует список вопросов. Вопросы получены из базы данных правильно и создается соответствующий div. Есть 55 вопросов.

Что я хочу сделать, это сделать только первый вопрос, который будет отображаться, и установить остальное. Затем на кнопку отправки нажмите текущий вопрос [1], и вопрос [2] становится видимым.

Ничего, что я пытаюсь в javascript, похоже, не имеет никакого влияния. Может ли кто-нибудь указать мне в правильном направлении?

   <div id="questionContainer"> 
        <%      for (int ques = 1; ques < 56; ques++) { 
          out.println("<div id ='question" + ques + "' name='question" + ques + "'class='questionVisible'>"); 
          out.println("<h2 class='page-header'>Question" + ques + "</h2>"); 
          if (iterate.hasNext()) { 

           //out.println(row[0]); 
           //out.println(row[1]);                     
           //out.println(row[0]); 
           String[] row = (String[]) iterate.next(); 
           if (row[0].equals("1")) { 
            out.println("<p id='question'>" + row[1] + "</p><br/>"); 
            out.println("<p id='ansA'><input type='radio' name='answer" + ques + "' value='A' checked>" + row[2] + "</p>"); 
            out.println("<p id='ansA'><input type='radio' name='answer" + ques + "' value='B' checked>" + row[3] + "</p>"); 
            out.println("<p id='ansA'><input type='radio' name='answer" + ques + "' value='C' checked>" + row[4] + "</p>"); 
            out.println("<p id='ansA'><input type='radio' name='answer" + ques + "' value='D' checked>" + row[5] + "</p>"); 
            out.println("<button class='btn' id='btnPAQues" + ques + "' type='button' name='btnPAQues" + ques + "' onclick='onSubmitBtn();'>Submit</button>"); 
           } else if (row[0].equals("2")) { 
            out.println("<p id='question'>" + row[1] + "</p><br/>"); 
            out.println("<p id='ansA'><input type='radio' name='answer" + ques + "' value='A' checked>" + row[2] + "</p>"); 
            out.println("<p id='ansA'><input type='radio' name='answer" + ques + "' value='B' checked>" + row[3] + "</p>"); 
            out.println("<p id='ansA'><input type='radio' name='answer" + ques + "' value='C' checked>" + row[4] + "</p>"); 
            out.println("<p id='ansA'><input type='radio' name='answer" + ques + "' value='D' checked>" + row[5] + "</p>"); 
            out.println("<p id='ansA'><input type='radio' name='answer" + ques + "' value='E' checked>" + row[6] + "</p>"); 
            out.println("<button class='btn' id='btnPAQues' type='submit' name='submit' onsubmit='onSubmitBtn'>Submit</button>"); 
           } else if (row[0].equals("3")) { 
            out.println("<p id='question'>" + row[1] + "</p><br/>"); 
            out.println("Answer: <p id='ansA'><input type='text' name='answer" + ques + "'</p><br/><br/>"); 
            out.println("<button class='btn' id='btnPAQues' type='submit' name='submit' onsubmit='onSubmitBtn'>Submit</button>"); 
           } 
          } 
          out.println("</div>"); 
         } 
        %> 

       </div> 


<script> 

for(int x= 2; x <56; x++) 
{ 
    document.getElementById("question"+x).style.visibility = "questionHidden;"; 
} 

    document.getElementById("btnPAQues1").onclick = onSubmitBtn(); 
    function onSubmitBtn() { 
     document.getElementById("question1").style.visibility = "hidden;"; 
    } 
</script> 

Answer 1

попробовать эту идею: во-первых, показать все вопросы добавить DIV на каждый вопрос

<div class="trigger" > <p id="question">...Submit</button> </div> 

затем добавить этот JS-код:

$(".trigger:first").show(); 

$("button").click(function() { 
    var $next = $(".trigger:visible").hide().next(".trigger"); 
    if (!$next.length) 
     $next = $(".trigger:first"); 

    $next.show(); 
}); 

пример: http://jsfiddle.net/huH7p/9/

Последний вопрос

• 1.
• 2.
• 3.
• 4.
• 5.

 Смежные вопросы

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.