Question

今天有人向我展示了一个页面的模型。这个想法是页面的访问者会看到一个带有问题的框和“是”和“否”按钮。

如果他们针对该问题点击“是”，则下一部分会显示另一个问题以及另外两个“是”和“否”的按钮。

点击“是”会向访问者显示第三个也是最后一个部分。

但是，如果他们在回答前两个问题时点击“否”，那么他们的想法是，他们会看到另一个部分，或者被重定向到另一个部分。

我相信这可以通过jQuery实现，并简要介绍了toggle（）和scrollTo - 后者似乎很有希望 - 但是想知道是否有人对如何最好地解决这个问题有任何建议？

提前致谢！

Answer 1

我过去曾做过类似的事情。我做的一件事是我将它实现为更多的“路由”系统，其中第一项不知道最后一项，它只知道它后面的内容。

考虑以下因素：

<div id="req1" data-yes="#req2" data-no="#reqno">
   Do you do stuff?
   <button class="yes">Yes</button>
   <button class="no">No</button>
</div>

<div id="req2" data-yes="#req3" data-no="#req1">
   <!-- content here... -->
</div>

<div id="req3" data-yes="#done" data-no="">
   <!-- content here... -->
</div>

... and so on

然后，您可以编写一些通用jQuery来使用编码到标记上的数据来了解流的处理/顺序。 data-yes和data-no的值是工作流的下一个元素的选择器。

代码将使用这些通用。有什么影响......

$('div[data-yes]').each(function() {
    var container = $(this);
    // Bind "YES"
    container.find('button.yes').click(function() {
        var next = $(container.attr('data-yes'));
        next.fadeIn();
        container.fadeOut();
    });
    // Bind "NO"
    container.find('button.no').click(function() {
        var next = $(container.attr('data-no'));
        next.fadeIn();
        container.fadeOut();
    });
});

Answer 2

试试这个：

$(".box .yes").click(function(e){
    $(this).closest(".box").hide().next().show();
});
$(".box .no").click(function(e){
    location.href = "/someredirecturl.htm";
});

您的标记看起来像：

<div class="box">
    Question blah blah ... ?
    <span class="yes">Yes</span>
    <span class="no">No</span>
</div>
<div class="box">
    Question blah blah ... ?
    <span class="yes">Yes</span>
    <span class="no">No</span>
</div>
<div class="box">
    Final content
</div>

工作演示：http://jsfiddle.net/LJ5Ha/

jQuery - 如果是则显示内容，否则重定向？

2 个答案: