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

Question

我有一个名为 .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();
    });
});

运气不太好

Answer 1

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

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

注意 .prev()< 的使用/a> 代表前一个兄弟，而不是 .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();
  });
});

Answer 2

您可以尝试这样的操作：

var i = 0;
var $stages = $('.stage');
$('.next').click(function() {
  $($stages[i]).fadeOut();
  i++;
  $($stages[i]).fadeIn();
});
$('.back').click(function() {
  $($stages[i]).fadeOut();
  i--;
  $($stages[i]).fadeIn();
});

通过这样做并跟踪用户所在的项目，您还可以始终通过执行 $stages[i] 检索应该可见的当前阶段。

Answer 3

<div class="stage">  
<h1>stage 1</h1>
</div>
<div class="stage">   
<h1>stage 2</h1>
</div>
<div class="stage">   
<h1>stage 3</h1>
</div>
<div class="stage">
<h1>stage 4</h1>
</div>

$(document).ready(function() {

             var navBtns = "BackNext";
            $(".stage").hide().append(navBtns);
            $(".stage:first .fade_back").hide();
            $(".stage:last .fade_next").hide();
            $(".stage:first").show();

            $(".fade_next").click(function() {
                $(this).closest(".stage").hide();
                $(this).closest(".stage").next(".stage").fadeIn("slow");
            });

            $(".fade_back").click(function() {
                $(this).closest(".stage").hide();
                $(this).closest(".stage").prev(".stage").fadeIn("slow");
            });
        });





.fade_nav{
    background-color: #f2f2f2;   
    padding: 10px;
    margin: 5px 0;
    text-align: center;
}
.fade_back, .fade_next{
    background-color: #666;
    color: #fff;
    border: 1px solid #888;
    margin: 3px;
    padding: 3px;
}
.fade_back:hover, .fade_next:hover{
    background-color: #000;
   cursor: pointer;
}

Answer 4

抽奖有点慢。基本上与上面的想法相同。然而，“下一步”和“后退”按钮标记有点重复，可以动态添加。这是一个 jsfiddle 显示如何添加：

http://jsfiddle.net/tBwYA/

希望您发现这很有用。

鲍勃