Amélioration en boucle de javascript

Question

Le code ci-dessous fonctionne correctement, mais il est codé en dur. J'aimerais pouvoir créer un tableau de jeux de champs, masquer ces champs, puis chaque fois que je clique sur le bouton "# createEventForm-eventInformation-addElement", il affiche le suivant. Le problème avec le code ci-dessous est qu'il est codé en dur et donc se casserait facilement et serait beaucoup plus grand que l'utilisation de boucles. Quelqu'un peut-il m'aider à améliorer cela?

$("#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

Vous devez utiliser la ^= notation des sélecteurs de jquery qui signifie commençant par ..

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

Puis

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

Answer 2

Voici une solution simple.

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 3

Une idée rapide.

Ajoutez une classe à chaque fieldset disons "hiddenfields". Déclarez une variable globale pour garder trace du champ qui est montré.

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

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

Answer 4

Ajouter une classe 'fieldset' à tous fieldsets, puis:

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

Answer 5

Que diriez-vous d'ajouter (ou utilisez uniquement) une classe pour que les champs?

$(".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 6

Cela montrera le premier élément caché fieldset dont l'attribut ID commence par "fieldset-groupe" ...

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