Question

我一直在考虑我已经采取的这个项目，现在我所追求的是一个表格，其中包含一系列问题，简单的是/否问题，在回答和提交时会动态返回相关数据在同一页面上。因此，最初所有答案都将被加载到页面上然后隐藏，我计划选择和返回数据的方式将是为每个元素分配一个类，无论是或否。像class="q1_0 q2_1 q3_1 q4_0"这样的东西，0表示否，1表示是。你认为这是一个解决这个问题的好方法还是一个更容易的选择？总结一下，我想看看是否有人处理过jQuery插件可以帮助解决这个问题？我们非常感谢任何帮助。

谢谢，

-Josh

Answer 1

好的，我们假设您使用复选框让用户对您的问题回答是/否。进一步假设您的问题顺序反映了您的答案在您的页面中的排列顺序。然后你需要这样的东西：

<ul>
    <li class="relevant_data">Hi, I'm quite relevant to question 1</li>
    <li class="relevant_data">Hi, I'm quite relevant to question 2</li>

....

<input type="checkbox" class="question"/> Are you hungry?
<input type="checkbox" class="question"/> Are you thirsty?

不适用于jQuery部分：

$questions = $('input.question');
$questions.bind('click', function() {
    var pos = $questions.index(this),
        item = $('ul li.relevant_data:eq('+pos+')');

    this.checked ?
        item.hide() : item.show();
});

希望它会有任何帮助。

Answer 2

你所描述的内容是可行的，虽然我当然不知道任何有助于它的插件。但是，如果你采取这种方法，你应该绝对肯定永远不会有比“q1 yes，q2 no”等更复杂的逻辑。例如，如果您需要“q1 yes，q2 yes或q4 no”作为问题的显示条件，那么您的方案将无法处理它，并且您最终会破解某些杂乱或重写您的整个系统

如果你认为以后可能需要更复杂的逻辑，我建议用纯JS来实现。例如：

function isYes(i) {
  return $("#question" + i).is(":checked");
}
var question1 = ["Is red your favorite color?", function() {
  return isYes(1);
}];
var question2 = ["Are dogs your favorite pet?", function() {
  return isYes(1) && (isNo(4) || isYes(7);
}];

类似的东西（加上用于呈现问题的逻辑和用于触发检查问题是否应该显示的onChange处理程序）。

当然，您可能只想创建一个“问题”类而不是使用数组，并且您可能想要一个数组对象而不是每个问题的单独变量，但这只是一个简单的例子。无论如何，这样的方法将在未来为您提供更多的力量和灵活性......但最初的工作也比基于课堂的想法更多。

JS / jQuery - 根据用户输入显示结果

2 个答案: