javascript - 导航至 Bootstrap 步骤向导中的任何步骤

Question

这是我的 JSFiddle :DEMO

单击“保存并继续”后，该步骤将导航至向导的下一步。

如何通过单击特定步骤导航到任何步骤？ (而不是已经存在的分步顺序​​)

  $('.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

编辑:- 添加按钮以跳转到特定步骤。 Fiddle

编辑:-我修改了你的 fiddle check this

试试这个 JsFiddle demo 我稍微修改了 html，通过向两者添加数据步骤参数来连接步骤 div 和相应的字段集。修改后，以下功能将允许您通过单击图标在步骤之间跳转。

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

这不是最好的解决方案，但这可以完成你的工作