Question

我想建立一个大约有20个问题的调查。所有问题都在同一页面中。

整个调查的结构就像树的结构。

最初，页面中只显示一个问题。

如果用户选择问题1的选项1,2，则调查结束。如果用户选择问题1的选项3,4,5，则出现问题2.

如果用户选择问题2的选项1,2,6，则出现问题3，否则转到问题12。

如果用户选择问题3中的1,2，请转到问题5，否则转到问题4。

...

当有很多问题时，通过javascript切换问题（使用display：none和display：block）非常麻烦。

在这种情况下，最简单的方法是什么？

以下代码是根据JacobM的anwer编写的。
出现另一个问题如果用户选择其他选项，我需要隐藏并显示另一个问题选项1 of 2a - ＆gt;显示q12
选项4 of 2a - ＆gt;显示q3并隐藏q12
q3的选项1 - ＆gt;显示q4
选项1 of 2a - ＆gt;显示q12，隐藏q3和q4＆lt; ---这种情况相当复杂

我该怎么办？

var responses = { 
1   : {1:'end', 2:'end', 3:2, 4:2, 5:2, 6:2},
'2a': {1:12,2:12,3:3,4:3,5:3,6:12}

};

function handleResponse(question, key)  {
   option = question.selectedIndex+1;
   var next = responses[key][option];
   if (next=='end') return;
   showQuestion(next);
}

function showQuestion(question){
    $('tr[id^=trQ'+question+']').show();
}

Answer 1

首先，绝对使用javascript框架。我喜欢jQuery，但有许多好的。

其次，找出一种方法来将一组适当的操作存储为某种类型的抽象，而不是试图编写每个规则。例如，你说

如果用户选择问题的选项1,2 1，调查结束。如果用户选择问题1的选项3,4,5，然后问题2出现了。

您可以将其编码为对象的层次结构

var responses = { 1: {1:'end', 2:'end', 3:2, 4:2, 5:2},
  2:{ //and the mappings here for the various responses for question 2}
...etc.
}

然后您需要一个函数将当前问题和响应转换为动作。

function handleResponse( question, option )  {
   var next = responses[question][option];
   if (next='end') return;//or however you want to handle being done.
   showQuestion(next);
}

然后你只需要一个showQuestion函数，它将取'2'并显示问题2（使用jQuery琐碎）。

如果特定响应非常复杂，您可以允许地图中的值为函数。因此你可以拥有

2:{1:function(){show(3);hide(6);hide(14)}, 2:5, etc.}

然后添加到句柄响应方法（在if（next ='end）之后......）

if (jQuery.isFunction(next)) next;

Answer 2

我见过的大多数调查使用类似于wizard的界面来做服务器端，而不是客户端。

Answer 3

考虑JQuery和JQuery Wizard。

选项根据用户的选择逐步显示

3 个答案: