多张幻灯片上的 HTML 表单

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 注入/恶意代码等。