Question

我有这个向导表单，根据上下文导航next或prev。

现在我想进行一些小改动，每一步都有prev和next。我认为这只是一个小小的改变，但我无法理解这一点。

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

Answer 1

这就是你在寻找什么？

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

我希望它有所帮助。

Answer 2

以上答案是正确的，这里是一个替代答案。我的建议是保持简单，减少重复，避免过多if语句，并使用变量来描述代码。

Fiddle Demo

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

    });

});

jQuery - 多步形式（向导）

2 个答案: