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问题中的第一个问题....所以为此，我决定......创建一个next和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/

Answer 2

考虑到你的小样本，我会尽力而为，但在我看来，你很难将代码概括为页面方法。我会解释原因

粗暴的做法

如果您不想更改任何内容，我会说您在样本中编写100个关于DOM的问题，并为每个10块创建一个部分：

<section class="section-1" ... > </section>

然后在您的javascript代码中，您可以拥有当前的活动页面，假设您从1开始：

var visiblePageIndex = 1

下一个按钮会使页面增加1，后退按钮会将可见页面减1，显然会考虑限制，1＆lt; = page＆lt; = 10。

现在，对于展示和隐藏，您需要将display的{{1}}设置设为可见页面索引section，inline-block设置为none所有其他人。您可以通过两种方式执行此操作：

在处理next和back的同一事件中，您可以使用jQuery查询包含可见索引编号（http://james.padolsey.com/javascript/regex-selector-for-jquery/）的所有部分。< / p>
让css选择器具有相同的功能（http://css-tricks.com/attribute-selectors/）

我更喜欢第二种。这应该可以解决这个问题，但显然维护很重，而且不会自动调整。

更具活力的方法

我将尝试说明这种方法的关键点，代码必须由您编写，或者如果您给我一个样本，我可以帮助您实现目标。

您需要将您的问题和可能的答案存储在数据结构中，希望存储在JSON或XML（bah）文件中，或者如果您不能简单地在JS块中内联。

这将允许您使用javascript迭代该结构，并将每次想要查看的问题数追加到DOM。点击next或prev只会更改您开始的索引并绘制相应的组。

您可以将答案保存在相同的结构中，这样当用户导航回来时，他会看到他/她的选择。

此选项的优点是：

动态调整问题的大小
您可以使用简单的变量更改自定义显示的问题数
它更轻量级，因为您不必加载大量DOM。
你练习了一下JS。

我希望这有帮助，有很多可能的解决方案。这只是其中的几个，但我肯定会尝试使用2号或类似的东西而不是黑客（选项1）。

jquery show使用next和previous按钮隐藏表单字段

2 个答案: