点击 <li> ，fadeOut（＃div1），fadeIn相关索引div

Question

I am new to jQuery and my way of learning is by following tutorials and tweak them afterwards. I am making a quiz from two tutorials combined where I have the following html code

<div class="questionContainer 1 hide">
        <ul class="answers img-hover">
            <li></li>
            <li></li>
        </ul> 
        <div class="btnContainer">
            <div class="next">
                <a class="btnNext" href="#"><img class="btnNext" src="img/Knap.png"></a>
            </div>
        </div>
    </div>


<div class="questionContainer 2 hide">
        <ul class="answers img-hover">
            <li></li>
            <li></li>
        </ul> 
        <div class="btnContainer">
            <div class="prev">
                <a class="btnPrev" href="#">Previous</a>
            </div>
            <div class="next">
                <a class="btnNext" href="#"><img class="btnNext" src="img/Knap.png"></a>
            </div>
        </div>
    </div>

<div id="progressKeeper">
        <ul>
            <li><a class="step" href="#"></a></li>
            <li><a class="step" href="#"></a></li>
            <li><a class="step" href="#"></a></li>
            <li><a class="step" href="#"></a></li>
            <li><a class="step" href="#"></a></li>
            <li><a class="step" href="#"></a></li>
            <li><a class="step" href="#"></a></li>
            <li><a class="step" href="#"></a></li>
            <li><a class="step" href="#"></a></li>
        </ul>
    </div>

There are a total of 9 questions and progress indicator dots. jQuery is being used to handle the question divs with .fadeOut() and .fadeIn() and with "next" and "previous" buttons.

$('.btnNext').click(function(){

                var tempCheck = $(this).parents('.questionContainer').find('input[type=radio]:checked');
            if (tempCheck.length == 0) {
                 notice.fadeIn(300);return false;
            }
                 notice.hide();
            $(this).parents('.questionContainer').fadeOut(500, function(){
                $(this).next().fadeIn(500);


                $('#progressKeeper ul li a.step.green').last().parent().next('li').find('a').addClass('green');

            });
                 return false;
        });         


        $('.btnPrev').click(function(){
                notice.hide();
            $(this).parents('.questionContainer').fadeOut(500, function(){
                $(this).prev().fadeIn(500);
                $('#progressKeeper ul li a.step.green').last().parent().last('li').find('a').removeClass('green');
            });
                 return false;
        });

What I am trying to achieve is when a user click on a progress indicator, fade out current questionContainer div and fade in the relative questionContainer. So if you are at the 8th question and click on progress indicator 1, fade out current div and fade in div no. 1.

How can I achieve this?

PS I have left irrelevant code so it might not make 100% sense the above code.

Thanks in advance

Answer 1

You can set it up like this:

<div class="questionContainer step0 active"></div>
<div class="questionContainer step1"></div>
<div class="questionContainer step2"></div>
<div class="questionContainer step3"></div>


<div id="progressKeeper">
    <ul>
        <li><a class="step" href="#"></a></li>
        <li><a class="step" href="#"></a></li>
        <li><a class="step" href="#"></a></li>
        <li><a class="step" href="#"></a></li>
        <li><a class="step" href="#"></a></li>
        <li><a class="step" href="#"></a></li>
        <li><a class="step" href="#"></a></li>
        <li><a class="step" href="#"></a></li>
        <li><a class="step" href="#"></a></li>
    </ul>
</div>

script:

$(".step").click(function(){
  index = $(this).parent().index();

  //hide active step
  $(".questionContainer.active").fadeOut(500, function(){
       //remove active class 
       $(this).removeClass('active');

       //show index and add active class
       $(".questionContainer.step"+index).fadeIn();
       $(".questionContainer.step"+index).addClass('active');
  });

});

http://jsfiddle.net/yak06am1/1/