jquery fadeout current div, find next div and fade in or find last and fade in

问题

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>

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();
    });
});

Not having much luck

回答1:

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();
});

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();
  });
});

回答2:

You could try something like this:

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();
});

By doing it this way and tracking which item the user's on, you can also always retrieve the current stage that should be visible by doing $stages[i].

回答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;
}

回答4:

A little slow on the draw. Mostly the same idea aas the above. However, the 'next' and 'back' button markup is a bit repetitive and could be added dynamically. Here is a jsfiddle showing how to add:

http://jsfiddle.net/tBwYA/

Hope you find this useful.

Bob

来源：https://stackoverflow.com/questions/4512914/jquery-fadeout-current-div-find-next-div-and-fade-in-or-find-last-and-fade-in