单击<li>、淡出(#div1)、淡入相关索引 div

Question

我是jQuery的新手，我的学习方法是遵循教程并在之后进行调整。我正在从两个教程中组合进行测验，其中我有以下 html 代码

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

总共有 9 个问题和进度指示器点。jQuery用于处理带有.fadeOut()和.fadeIn()以及"下一个"和"上一个"按钮的问题div。

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

我试图实现的是当用户单击进度指示器时，淡出当前的问题容器div 并淡入相对的问题容器。因此，如果您在第 8 个问题并单击进度指示器 1，淡出当前div 并淡入div 编号 1。

我怎样才能做到这一点？

附言我留下了不相关的代码，因此上面的代码可能无法 100% 有意义。

提前致谢

Answer 1

您可以像这样设置它：

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

脚本：

$(".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/