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

问题描述

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

I have div class called .stage which is a stage of a questionnaire

<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，如果您选择下一步"，它将关闭当前阶段并打开下一个阶段；或者，如果您单击返回"，它将关闭当前阶段，从而打开上一个阶段，依此类推.

I am trying to write some compact jQuery that if you select next it closes the current stage and opens the next stage or if you click back it closes current stage opens last one and so on..

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

运气不好

推荐答案

您只需要进行一些链接更改，例如:

You just need some chaining changes, like this:

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

请注意，对于上一个兄弟姐妹，使用 .prev() ，而不是 .last() ，它获取集合中的最后一个元素.如果您不想交叉淡入淡出，请在回调内部进行淡入淡出，如下所示:

Note the use of .prev() for the previous sibling, rather than .last() which gets the last element in the set. If you don't want the cross-fade, do the fade-in inside the callback, like this:

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

这篇关于jQuery淡出当前div，找到下一个div并淡入，或者找到最后一个并淡入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！