jQuery - 다중 단계 양식 (마법사)

Question

문맥에 따라 next 또는 prev 중 하나로 이동하는 마법사 양식이 있습니다.

이제 작은 변화를 만들고 각 단계마다 prev과 next을 갖고 싶습니다. 나는 이것이 단지 작은 변화 일 것이라고 생각했지만 이것에 대해 내 머리를 터지 리라.

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

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

    }); 

});