Question

我想在一个大约五个问题的网站上创建一个表单，每个问题都位于不同的幻灯片上。我想要的效果是你回答一个问题，然后在短暂的延迟后，下一个问题出现在同一个地方。现在我正在完成它使用jQuery选项卡，但我更喜欢这样做而没有标签可见（或至少看起来不像标签）并自动进入下一个问题。

我寻找“JavaScript幻灯片”，但这似乎为图像幻灯片提供了无数的插件。我发誓我以前见过这种效果但是现在找不到它。是否有一个插件（现在甚至只是一个幻灯片，允许每张幻灯片上的任意HTML将有所帮助 - 我将弄清楚如何从表单中获取信息）。

Answer 1

您可以在JavaScript变量中保存每个页面上输入的值。

var answerOne, answerTwo, answerThree, answerFour, answerFive;
$('form').submit(function(event){
    event.preventDefault();
    answerOne = $('form input#question-one').value();
    // then run the script which hides current page and shows next
});

您可以使用jQuery在页面之间轻松切换。

最简单的方法是（在每个div中想象你的表格）：

<div id="page-1"></div>
<div id="page-2"></div>
<div id="page-3"></div>
 ...

<script>
    $('#page-1').hide();
    $('#page-2').show();
</script>

这是一个如何在页面上隐藏和显示元素的简单示例。它应该足以让你使用。您需要一个变量来存储您正在查看的页面，并在其更改时递增它。

如果要在最后保存信息，我建议处理服务器端，确保它有效以及您期望的数据类型。否则，攻击者可能会在发送之前操纵这些值，可能会产生不需要的SQL注入/恶意代码等。

几张幻灯片上的HTML表单

1 个答案: