javascript - 如何为多个 div 表单创建上一个和下一个按钮？

Question

我有一个包含多个“页面”的表单，每个“页面”都是一个包含一些内容的容器。

我希望上一个和下一个按钮遵循这些规则:

• 点击下一步按钮应该会在表单的页面中前进，直到最后一页并停止
• 点击上一个按钮应该在表单中向后前进，直到第一页并停止。

Here is the example of similar functionality除了它不遵循上述规则，因为在最后一页点击下一页会循环回到第一页，反之亦然。

这是我到目前为止尝试过的:

JS

$('.box button').click(function() {
    
    $('.box').each( function() {
        if ($(this).offset().left < 0) {
            $(this).css("left", "150%");
        }
    });
    
    var t=$(this);
    t.parent().animate({
         left: '-50%'
     }, 500);
 
     if (t.parent().next().size() > 0) {
         t.parent().next().animate({
             left: '50%'
         }, 500);
     } else {
         t.parent().prevAll().last().animate({
             left: '50%'
         }, 500);
     }
});

Answer 1

下面是实现此目的的一种方法(请注意，这可以简化一点，但在这里这样做会使新程序员更难理解):

$('.previous').click(function () {
    var cur = $('.form-panel').index($('.form-panel.active'));
    if (cur!=0) {
        $('.form-panel').removeClass('active');
        $('.form-panel').eq(cur-1).addClass('active');
    }
});
$('.next').click(function () {
    var cur = $('.form-panel').index($('.form-panel.active'));
    if (cur!=$('.form-panel').length-1) {
        $('.form-panel').removeClass('active');
        $('.form-panel').eq(cur+1).addClass('active');
    }
});

.form-panel:not(.active) {
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-panel active">Panel one content here</div>
<div class="form-panel">Panel two content here</div>
<div class="form-panel">Panel three content here</div>
<div class="form-panel">Panel four content here</div>
<div class="form-panel">Panel five content here</div>
<div class="form-panel">Panel six content here</div>
<br>
<button class="previous">Previous</button>
<button class="next">Next</button>

如果您需要动画，可以轻松修改此方法以包含它们。