jquery淡出当前div，找到下一个div并淡入或找到最后一个并淡入

我有一个名为 .stage 的 div 类，它是问卷的一个阶段

<div class="stage">
    <div class="next">Next</div>
</div>
<div class="stage">
    <div class="back">Back</div>
    <div class="next">Next</div>
</div>
<div class="stage">
    <div class="back">Back</div>
    <div class="next">Next</div>
</div>
<div class="stage">
    <div class="back">Back</div>
</div>

我正在尝试编写一些紧凑的 jQuery，如果您选择“下一步”，它会关闭当前阶段并打开下一个阶段，或者如果您单击“后退”，它会关闭当前阶段并打开最后一个阶段，依此类推。

$(".next").click(function () {
        $(this).closest(".stage").fadeOut();
        (".stage").next().fadeIn();
    });
$(".back").click(function () {
        $(this).closest(".stage").fadeOut();
        (".stage").last().fadeIn();
    });
});

运气不太好

您只需要一些链接更改，如下所示：

$(".next").click(function () {
  $(this).closest(".stage").fadeOut().next().fadeIn();
});
$(".back").click(function () {
  $(this).closest(".stage").fadeOut().prev().fadeIn();
});

注意使用.prev() http://api.jquery.com/prev/对于前一个兄弟姐妹，而不是.last() http://api.jquery.com/last/它获取集合中的最后一个元素。如果您不希望交叉淡入淡出，请在回调中执行淡入，如下所示：

$(".next").click(function () {
  $(this).closest(".stage").stop().fadeOut(function() {
    $(this).next().fadeIn();
  });
});
$(".back").click(function () {
  $(this).closest(".stage").stop().fadeOut(function() {
    $(this).prev().fadeIn();
  });
});