0

nextコンテキストに応じて、またはコンテキストに応じてナビゲートするこのウィザード フォームがprevあります。

今、私は小さな変更を加えるのが好きで、各ステップにprevとの両方を持っています。nextほんの少しの変化だと思っていましたが、これについては理解できません。

これはjsフィドルです

$(document).ready(function() {
    $('a').click(function(e) {
        e.preventDefault();
        var parent = $(this).parent('div'), grandpa = $('.steps-content>div'), index = grandpa.index(parent)+1;
        parent.removeClass('content-active');
        grandpa.eq(index).addClass('content-active');
$('.steps-wizard').children('div').removeClass('step-active').eq(index).addClass('step-active');
    });
});
4

2 に答える 2

3

これはあなたが探しているものですか？

$(document).ready(function() {   
    var $pages = $(".steps-content").children("div"),
        $steps = $(".steps-wizard").children("div"),
        totalPages = $pages.length,
        count = 0;

    $(".navigation").on("click",function(e){
        e.preventDefault();        
        var navigate = $(this).data("nav");
        if(navigate == "next"){ 
            count++;
        }else{
            count--;
        }

        if(count > totalPages){
            count = 0;
        }
        if(count < totalPages && count >=0){
            $pages.removeClass('content-active').eq(count).addClass('content-active');                
            $steps.removeClass('step-active').eq(count).addClass('step-active');
        }
    });    
});

ここで働くフィドル：http://jsfiddle.net/uZY4B/9/

お役に立てば幸いです。

于 2013-09-07T10:59:29.623 に答える
3

上記の答えは正しいです。ここでは別の答えです。私のアドバイスは、シンプルに保ち、重複を減らし、過度の if ステートメントを避け、変数を使用してコードを記述することです。

フィドルのデモ

CSS

.steps .step, .contents .content
{
    display: none;
}
.steps .step.active, .contents .content.active
{
    display: block;
}

jquery

$(function()
 {
    $('.navigation').click(function(event) 
    {
        event.preventDefault();

        var $this       = $(this)
        var direction   = $(this).text();

        var $steps      = $('.steps .step');
        var $activeStep = $steps.filter('.active');
        var $nextStep   = $activeStep[direction]();
        var hasStep     = $nextStep.length !== 0;
        var stepIndex   = $nextStep.index()

        var $contents         = $('.contents .content');
        var $activeContent    = $contents.filter('.active');
        var $nextContent      = $contents.eq(stepIndex);

        if(hasStep)
        {
           $steps.removeClass('active');
           $nextStep.addClass('active');

           $activeContent .removeClass('active');
           $nextContent.addClass('active'); 
        }

    });

});
于 2013-09-07T11:44:52.553 に答える