javascript - jquery 使用下一个和上一个按钮显示隐藏表单字段

Question

我有一个表格，里面有 100 个问题..和复选框或单选按钮作为回答问题的选项..

 <b style="font-weight:bold">1.How long have you been working in field of Programming?</b><br/>
  <input type="radio" name="1" value="Less than 2 years" style="cursor:pointer">
  <span style="display: inline-block;font-size: 13px;position: relative;top: -2.5px;">Less than 2 years</span>

  <input type="radio" name="1" value="3-5 years" style="cursor:pointer">
  <span style="display: inline-block;font-size: 13px;position: relative;top: -2.5px;">3-5 years</span>

  <input type="radio" name="1" value="6-10 years" style="cursor:pointer">
  <span style="display: inline-block;font-size: 13px;position: relative;top: -2.5px;">6-10 years</span>

  <input type="radio" name="1" value="11-15 years" style="cursor:pointer">
  <span style="display: inline-block;font-size: 13px;position: relative;top: -2.5px;">11-15 years</span>

上面的 html 是我在 100 个问题中的第一个问题....所以为此我决定......创建一个下一个 和 previous 按钮一次在屏幕上显示 10 个问题？

有什么建议或帮助会很有帮助吗？..提前致谢..

Answer 1

这是我能得到的最简单的方法。

HTML:
为页面添加 div(第一页有一个额外的 active 类)

<div class="page active">
    <!-- A set of questions go here -->
</div>

<div class="page">
    <!-- Another set of questions go here -->
</div>
...

CSS:

.page { display: none; }
.active { display: inherit; }

jQuery:

$("#prev").on("click", function(){
    if($(".page.active").index() > 0)
        $(".page.active").removeClass("active").prev().addClass("active");
});
$("#next").on("click", function(){
    if($(".page.active").index() < $(".page").length-1)
        $(".page.active").removeClass("active").next().addClass("active");
});

完成了!

在这里摆弄这个例子: http://jsfiddle.net/V8LCL/