Accédez à une étape dans une étape Assistant Bootstrap

Question

Voici mon jsFiddle: DEMO

Sur clic « Enregistrer & Continuer », l'étape accède à l'étape suivante de l'assistant.

Comment accéder à une étape quelconque d'un clic sur une étape spécifique? (au lieu de la séquence pas-à-pas qui existe déjà)

$('.f1 .btn-next').on('click', function() { 
    var parent_fieldset = $(this).parents('fieldset'); 
    var next_step = true; 
    // navigation steps/progress steps 
    var current_active_step = $(this).parents('.f1').find('.f1-step.active'); 
    var progress_line = $(this).parents('.f1').find('.f1-progress-line'); 

    // fields validation 
    parent_fieldset.find('input[type="text"], input[type="password"], textarea').each(function() { 
     if($(this).val() == "") { 
      $(this).addClass('input-error'); 
      next_step = true; 
     } 
     else { 
      $(this).removeClass('input-error'); 
     } 
    }); 

Answer 1

Modifier: - Boutons ajoutés pour passer à des étapes spécifiques. Fiddle

EDIT: - Je l'ai modifié votre violon check this

Essayez cette JsFiddle demo J'ai modifié le code html légèrement pour relier les étapes div et fieldset correspondant en ajoutant un paramètre de données étape à la fois. Après la modification, la fonction ci-dessous vous permettra de sauter entre les étapes en cliquant sur l'icône.

$(this).parents('.f1').find('.f1-progress-line'); 

    fieldsetToActivate = $(this).data('step'); 
    let direction; 
    if (current_active_step.data('step') > fieldsetToActivate) { 
     direction = 'left'; 
    } else { 
     direction = 'right'; 
    } 
    $("form.f1 fieldset").hide(); 
    current_active_step.removeClass('active'); 
    // bar_progress(progress_line, direction); 
    // ************* // 
    var number_of_steps = progress_line.data('number-of-steps'); 
    var now_value = progress_line.data('now-value'); 

    var new_value = 0; 
    if (direction == 'right') { 
     new_value = fieldsetToActivate * (100/number_of_steps); 
    } else if (direction == 'left') { 
     new_value = fieldsetToActivate * (100/number_of_steps); 
    } 
    console.log('now:' + now_value + '- new: ' + new_value); 
    progress_line.attr('style', 'width: ' + new_value + '%;').data('now-value', new_value); 
    // ****************** // 
    $('.f1').find(`fieldset[data-step='${fieldsetToActivate}']`).fadeIn('slow'); 
    // change icons 
    $('.f1-step').removeClass('activated'); 
    $(this).addClass('active'); 
    for (let j = 0; j < fieldsetToActivate; j++) { 
     $('.f1').find(`.f1-step[data-step='${j}']`).addClass('activated'); 
    } 
}); 

Ce n'est pas la meilleure solution, mais cela faire votre travail