Loop through javascript improvement

Question

The below code works properly, but it is hard coded. I would like to be able to create an array of field sets, hide those fields, then each time I click on the "#createEventForm-eventInformation-addElement" button it displays the next one. The problem with the below code is that it is hard coded and thus would break easily and be much larger than using loops. Can someone help me make this better.

$("#fieldset-group1").hide();
$("#fieldset-group2").hide();
$("#fieldset-group3").hide();
$("#fieldset-group4").hide();
$("#fieldset-group5").hide();
$("#fieldset-group6").hide();
$("#fieldset-group7").hide();
$("#fieldset-group8").hide();
$("#fieldset-group9").hide();

$("#createEventForm-eventInformation-addElement").click( 
  function() { 
      ajaxAddEventInformation();
      if($("#fieldset-group1").is(":hidden"))
      {
          $("#fieldset-group1").show();
      }
      else
      {
          $("#fieldset-group2").show();
      }


   }
);

Answer 1

Here is one simple solution.

var index = 0;
var fieldsets = [
        $("#fieldset-group1").show(),
        $("#fieldset-group2"),
        $("#fieldset-group3"),
        $("#fieldset-group4"),
        $("#fieldset-group5"),
        $("#fieldset-group6"),
        $("#fieldset-group7"),
        $("#fieldset-group8"),
        $("#fieldset-group9")   
    ];    

$("#createEventForm-eventInformation-addElement").click(function() { 
    ajaxAddEventInformation();              
    fieldsets[index++].hide();
    if (index < fieldsets.length) {
        fieldsets[index].show();  
    }
    else {
        index = 0;
        fieldsets[index].show(); 
    }
});

Answer 2

A quick idea.

Add a class to each fieldset lets say "hiddenfields". Declare a global variable to keep track of which field is shown.

  $(".hiddenfields").hide();//hide all
  var num = 0;//none shown

  $("#createEventForm-eventInformation-addElement").click( 
     function() { 
         ajaxAddEventInformation();
         num++;
         $("#fieldset-group" + num).show();
     }
  );

Answer 3

Add a class 'fieldset' to all fieldsets, then:

$("#createEventForm-eventInformation-addElement").click( 
  function() { 
      ajaxAddEventInformation();
      $('.fieldset').is(':visible')
          .next().show().end()
          .hide();
   }
);

Answer 4

How about to add (or only use) a class for that fields?

$(".fieldset").hide(); // hides every element with class fieldset

$("#createEventForm-eventInformation-addElement").click( function() { 
    ajaxAddEventInformation();
    // I assume that all fieldset elements are in one container #parentdiv
    // gets the first of all remaining hidden fieldsets and shows it
    $('#parentdiv').find('.fieldsset:hidden:first').show(); 

});

Answer 5

This will show the first hidden fieldset element whose ID attribute starts with "fieldset-group"...

$("fieldset[id^='fieldset-group']:hidden:first").show();

Answer 6

You should use the ^= notation of the jquery selectors which means starting with ..

// this will hide all of your fieldset groups
$('[id^="fieldset-group"]').hide(); 

Then

$("#createEventForm-eventInformation-addElement").click( 
  function() { 
      ajaxAddEventInformation();
      // find the visible one (current)
      var current = $('[id^="fieldset-group"]:visible');
      // find its index
      var index = $('[id^="fieldset-group"]').index( current ); 
      // hide the current one
      current.hide(); 
      // show the next one
      $('[id^="fieldset-group"]').eq(index+1).show(); 
   }
);