jQuery - 根据用户输入显示/隐藏

Question

我的div页面上有以下内容:

<div id="page1">
    Some content
</div>

<div id="page2">
    More content
</div>

<div id="page3">
    Even more content
</div>

在页面的底部,我有两个按钮Continue和Back-什么,我需要做的是显示和隐藏基于用户输入的div.

默认情况下,page1应该显示和其他被隐藏,当用户点击Continue'第2页is shown and页1和3 are hidden - if the user clicks the回button thenpage1`显示和其他隐藏等等.

我有一个关于如何在jQuery中实现它的完整心理块 - 欢迎任何和所有帮助.

Answer 1

您需要将这些元素放在容器中,然后使用prev和next遍历它们.像这样的东西:

$('.next').click(function() {
    $('.sequence-container div').hide();
    var $next = $('.sequence-container div:visible').next();
    $next.length ? $next.show() : $('.sequence-container div:first').show();
});

$('.prev').click(function() {
    $('.sequence-container div').hide();
    var $prev = $('.sequence-container div:visible').prev();
    $prev.length ? $prev.show() : $('.sequence-container div:last').show();
});

示例小提琴

UPDATE

要防止从开始/结束循环使用此:

$('.next').click(function() {
    var $next = $('.sequence-container div:visible').next();    
    if ($next.length) {
        $('.sequence-container div').hide();
        $next.show();
    }
});

$('.prev').click(function() {
    var $prev = $('.sequence-container div:visible').prev();
    if ($prev.length) {
        $('.sequence-container div').hide();
        $prev.show();
    }
});

更新了小提琴