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()以及“next”和“previous”按钮的问题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;
        });

我想要实现的是当用户点击进度指示器，淡出当前的questionContainer div并淡入相对的questionContainer时。因此，如果您在第8个问题并单击进度指示器1，淡出当前div并淡入div否。 1。

我怎样才能做到这一点？

P.S。我留下了不相关的代码，因此可能无法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/

单击<li>，fadeOut（#div1），fadeIn相关索引div </li>

1 个答案: