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()用于上一个兄弟，而不是.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/

希望你觉得这很有用。

鲍勃

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

4 个答案: