javascript - jQuery.steps 跳过一步

Question

我正在使用 jQuery.steps 插件 ( http://www.jquery-steps.com/ ) 在内部网页中引导用户。

到目前为止一切顺利，现在我面临一个小问题，我目前确实有 5 个步骤，我现在需要实现的是：如果在第一步中选择了下拉列表中的特殊值，我必须跳过这些步骤2 和 4，因为此时不需要这些。

你们有什么解决办法吗？

我希望你能得到我的问题，如果你确实需要更多信息，请告诉我。

谢谢！

Answer 1

在里面jquery.steps.js

将类添加到 <ul role=\"tablist\" class=\"tablist\"></ul>（第 1037 行）

更改功能goToNextStep&goToPreviousStep到

var length_custom; 
function goToNextStep(wizard, options, state)
{
    length_custom = $('ul.tablist li.skip').length; 
    var newIndex = increaseCurrentIndexBy(state, 1);
    var anchor = getStepAnchor(wizard,  newIndex),
    parent = anchor.parent(),
    isSkip = parent.hasClass("skip");
    if(isSkip){
        goToStep(wizard, options, state, newIndex + length_custom)
    }else{
        return paginationClick(wizard, options, state, newIndex);
    }
}

function goToPreviousStep(wizard, options, state)
{
    var newIndex = decreaseCurrentIndexBy(state, 1);
    var anchor = getStepAnchor(wizard,  newIndex),
    parent = anchor.parent(),
    isSkip = parent.hasClass("skip");
    if(isSkip){
        goToStep(wizard, options, state, newIndex - length_custom)
    }else{
        return paginationClick(wizard, options, state, newIndex);
    }
}

然后在文件底部添加这些函数

$.fn.steps.skip = function (i) {
    var wizard = this,
    options = getOptions(this),
    state = getState(this);
    if (i < state.stepCount) {
        var stepAnchor = getStepAnchor(wizard, i);
        stepAnchor.parent().addClass("skip");
        refreshSteps(wizard, options, state, i);
    }
};
$.fn.steps.unskip = function (i) {
    var wizard = this,
    options = getOptions(this),
    state = getState(this);
    if (i < state.stepCount) {
        var stepAnchor = getStepAnchor(wizard, i);
        stepAnchor.parent().removeClass("skip");
        refreshSteps(wizard, options, state, i);
    }
};

现在，初始化您要跳过的步骤

$("#wizard").steps('skip', index);
$("#wizard").steps('skip', index);// if you want to skip more than one step
$("#wizard").steps('skip', index);// if you want to skip more than one step

禁用跳过

$("#wizard").steps('unskip', index);
$("#wizard").steps('unskip', index);// if you want to unskip more than one step
$("#wizard").steps('unskip', index);// if you want to unskip more than one step

Answer 2

我想出了一个基于 ajl80 答案的解决方案。

但我不得不将goToNextStep&更改goToPreviousStep为：

var length_custom;
function goToNextStep(wizard, options, state)
{
  var valid = false;
  var i = 0;
  while (!valid) {
    i++;
    var newIndex = increaseCurrentIndexBy(state, i);
    var anchor = getStepAnchor(wizard, newIndex),
    parent = anchor.parent(),
    isSkip = parent.hasClass("skip");
    if (!isSkip) valid = true;
  }
  return paginationClick(wizard, options, state, newIndex);
}

function goToPreviousStep(wizard, options, state)
{
  var valid = false;
  var i = 0;
  while (!valid) {
    i++;
    var newIndex = decreaseCurrentIndexBy(state, i);
    var anchor = getStepAnchor(wizard, newIndex),
    parent = anchor.parent(),
    isSkip = parent.hasClass("skip");
    if (!isSkip) valid = true;
  }
  return paginationClick(wizard, options, state, newIndex);
}

Answer 3

有事件称为onStepChanging，onStepChanged可以传递给form.steps. 您可以编写一个函数来验证您的表单和步骤，并基于currentIndex,newIndex您可以触发下一个选项卡。

我在这里附上对您有帮助的相同链接。