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/

Answer 2

不要使用Javascript来写出问题。将所有问题放在标准HTML中，使用最初隐藏它的CSS类，问题1除外。然后在每次提交时使相应的一个可见，同时隐藏前一个。

您可以使用网络服务吗？执行此操作的常用方法是使用JSP设置页面，然后使用Javascript为每个问题调用Web服务。所以当页面加载调用第一个问题时。当用户单击下一个的提交调用时。等等。

单击按钮上的JSP + Dynamic CSS

2 个答案: