jQuery - 多步表单（向导） [英] jQuery - Multiple step form (wizard)

问题描述

我有这个向导可以根据上下文导航到下一个或 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'）; 
}）; 
}）; 
  

解决方案

是你在找什么???

  $（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--; 
} 
 $ b $ if if（count> totalPages）{
 count = 0; 
} 
 if（count< totalPages& count> = 0）{$ b eq（count）.addClass（'content-active'）; 
 $ steps.removeClass（'step-active'）。eq（count）.addClass （'step-active'）; 
} 
 }）; 
}）; 
  

在这里工作的小提琴： http://jsfiddle.net/uZY4B/9/

我希望它有帮助。

I have this wizard form that navigates with either next or prev depending on the context.

Now I like to make a small change and have both prev and next on each step. I thought it will be only a small change but I can't get my head around this.

This is js fiddle

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

解决方案

is this what are you looking for???

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

working fiddle here: http://jsfiddle.net/uZY4B/9/

I hope it helps.

这篇关于jQuery - 多步表单（向导）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！