JQuery - Is there an easier way to write this?

Question

I am a new programmer, so it fascinates me if it is an amateur ... I'm looking for some direction or maybe some ideas. For me, the goal here is to learn, so any push in the right direction will be perceived.

ok .. I challenged myself to create a "wizard" as a control for a simple registration form using jQuery. I can go through the steps pretty well, but I look at my code and I can not help, but I think; "there must be a better, simpler and more correct way to do this." Here is what I have.

function toggleStep(){ $("#nextButton").click(function(){ if($("#nextButton").name = "step1"){ $("#nextButton").attr("name", "step2"); $("#backButton").attr("name", "step1").css("display", "inline"); $("#step1").hide(); $("#step2").show("fade", 250); } $("#nextButton").click(function(){ if($("#nextButton").name = "step2"){ $("#nextButton").attr("name", "step3"); $("#backButton").attr("name", "step2"); $("#step2").hide(); $("#step3").show("fade", 250); } $("#nextButton").click(function(){ if($("#nextButton").name = "step3"){ $("#nextButton").attr("name", "step4"); $("#nextButton").css("display", "none"); $("#backButton").attr("name", "step3"); $("#step3").hide(); $("#step4").show("fade", 250); } }); }); }); } 

Also, I seem to have mixed myself up when creating the back button feature. This code is simply not good enough. How would you approach this? Thanks!!!

Answer 1

I edited @Boaz code and now you get something clean, which I think will help you better understand. I also added some comments.

JQuery code will become

  $('#next, #prev').click(function(){ var t = $(this), current = $('#steps_container').find( '.step:visible' ), stepGo = ( t.attr( 'id' ) == 'next' ? current.next() : current.prev() ); if ( stepGo.length ) { current.fadeOut( 'slow', function(){ stepGo.fadeIn( 'slow' ); }); }; return false; }); 

Answer 2

I would just use jquery to switch class = "activeStep" and the rest (hiding, showing, fading) using css.

Answer 3

You will probably want to look at jQuery prev () and next () . Combined with logic based on the class name for the steps (instead of DOM identifiers), these methods can very easily shorten and simplify your code.

A rough detailed example:

 $('#nextButton').click( function() { var current_step = $('#steps_container').find('.step:visible'); var next_step = current_step.next(); if (next_step.length) { current_step.hide(); next_step.fadeIn(250); } } ); $('#prevButton').click( function() { var current_step = $('#steps_container').find('.step:visible'); var prev_step = current_step.prev(); if (prev_step.length) { current_step.hide(); prev_step.fadeIn(250); } } ); 

This should perfectly handle any number of steps in the following markup:

 <div id="steps_container"> <div class="step">Step 1</div> <div class="step">Step 2</div> <div class="step">Step 3</div> <div class="step">Step 4</div> <div class="step">Step 5</div> <div class="step">Step 6</div> ... </div> 

---

While @stefanz improves my code, an even simpler and more general approach might be to associate navigation button handlers with a class, for example:

 $('.steps_nav_buttons_bar .steps_nav_button').click( function() { var current_step = $('#steps_container').find('.step:visible'), new_step = $(this).hasClass('next') ? current_step.next() : current_step.prev(); if (new_step.length) { current_step.fadeOut('fast',function() { new_step.fadeIn('fast') }) } } ); 

The advantage of this is that it allows you to add more than one set of navigation buttons, for example, if you want the navigation bars to be above and below:

 <div class="steps_nav_buttons_bar top_bar"> <div class="steps_nav_button prev">Prev</div> <div class="steps_nav_button next">Next</div> </div> <div id="steps_container"> <div class="step">Step 1</div> <div class="step">Step 2</div> <div class="step">Step 3</div> <div class="step">Step 4</div> <div class="step">Step 5</div> <div class="step">Step 6</div> ... </div> <div class="steps_nav_buttons_bar bottom_bar"> <div class="steps_nav_button prev">Prev</div> <div class="steps_nav_button next">Next</div> </div>