JQuery Fadeout текущий DIV, найти следующий DIV и исчезнуть или найти последний и исчезнуть

Question

У меня есть div-класс с именем .stage, который является этапом вопросника

<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

<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 3

Вы можете попробовать что-то вроде этого:

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 4

Немного медленно на ничью.В основном та же идея, что и выше.Однако разметка кнопок «Далее» и «Назад» немного повторяется и может быть добавлена ​​динамически.Вот jsfiddle, показывающий, как добавить:

http://jsfiddle.net/tBwYA/

Надеюсь, вы найдете это полезным.

Боб