Javascript 单击“下一步”或“上一步”切换类

我正在尝试设置多步骤表单，其中第一步默认可见，其余步骤使用类“hide”隐藏。我想用“下一步”和“上一步”按钮切换类，这样一次只能看到一个步骤。你能帮个忙吗（已经花了一个小时了）

步骤1
步骤二
步骤三
步骤四
返回
下一个
$（'.next'）。单击（函数（）{
$（'div:not（.hide'）.next（）.removeClass（'hide'）；
$（'.hide'）.prev（）.removeClass（'hide'））
})

$（'.next'）。单击（函数（）{
//查找未隐藏的div
var$current=$（'.steps div:not（.hide'）；
//仅当有正在进行的div时才执行逻辑
if（$current.next（）.length）{
//显示下一个div
$current.next（）.removeClass（'hide'）；
//隐藏旧的当前div
$current.addClass（'hide'）
}
});
$（'.back'）。单击（函数（）{
//查找未隐藏的div
var$current=$（'.steps div:not（.hide'）；
//仅当存在前一个div时才执行逻辑
如果（$current.prev（）.length）{
//显示上一个div
$current.prev（）.removeClass（'hide'）；
//隐藏旧的当前div
$current.addClass（'hide'）
}
});
.hide{display:none；}

步骤1
步骤二
步骤三
步骤四
返回
接下来
您可以添加一个当前步骤变量来跟踪当前显示的步骤，并添加两个css来设置样式和显示内容


jQuery（函数（$）{
设currentstep=1；
设maxsteps=4；
功能显示步骤（步骤）{
让step_c='.step'+step；
对于（i=1；i我将Taplar的答案转换为jQuery插件

实际上，您是在使用上一个和下一个函数逐个向左或向右导航。这些函数在同级元素中导航


（函数（）{
$.fn.moveRight=函数（类名）{
var$curr=this.find（'div:not（'.+className+'））；
if（$curr.next（）.length）$curr.next（）.removeClass（className）；
否则这个.find（'div:first child'）.removeClass（className）；
$curr.addClass（类名称）；
归还这个；
};
$.fn.moveLeft=函数（类名）{
var$curr=this.find（'div:not（'.+className+'））；
if（$curr.prev（）.length）$curr.prev（）.removeClass（className）；
否则这个.find（'div:last child'）.removeClass（className）；
$curr.addClass（类名称）；
归还这个；
};
})（jQuery）；
$（'.next'）。on（'click'，（e）=>$（'.steps'）。moveRight（'hide'）；
$（'.back'）。on（'click'，（e）=>$（'.steps'）。moveLeft（'hide'）；
.hide{
显示：无；
}
.导航{
宽度：260px；
文本对齐：居中；
}
.nav.nav btn:：选择{背景：透明；}
.nav.nav btn:：-moz选择{背景：透明；}
.导航.导航btn{
显示：内联块；
光标：指针；
}
.步骤{
宽度：260px；
身高：165px；
边框：薄而实的黑色；
文本对齐：居中；
线高：165px；
字号：3em；
}

步骤1
步骤二
步骤三
步骤四
[；<；<；背部]；
&#下一个>>]；
尝试将这两个动作组合成一个动作，如下所示：

$('.next').click(function(){
    $('.steps div:not(.hide)').addClass('hide').next().removeClass('hide');
})

这样，就可以在当前div中添加.hide类，然后在下一个div中删除它

通过将.next（）替换为.previous（）
查看的
toggleClass
。@RodrigoMorbach我知道这一点。但是似乎不知道如何在这个场景中使用。你有一些css可以使用吗？类似于div.hide{display:none；}
$('.next').click(function(){
    $('.steps div:not(.hide)').addClass('hide').next().removeClass('hide');
})