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