php - 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并隐藏其他页面，显示第2页，第1页和第3页隐藏 - 如果用户单击后退按钮，则会显示page1`，而其他页面则隐藏，依此类推。

我完全不知道如何在 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();
});

Example fiddle

<小时/>

更新

要防止从开始/结束循环，请使用以下命令:

$('.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();
    }
});

Updated fiddle