jQuery.steps 跳过一步答案

【问题标题】：jQuery.steps skip a stepjQuery.steps 跳过一步
【发布时间】：2015-11-07 16:20:25
【问题描述】：

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

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

你们有什么解决办法吗？

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

谢谢！

【问题讨论】：

你有什么代码可以给我们看吗？最好在 JSFiddle 中
使用onStepChanging 的jquery-steps 事件并检查其第一步是否使用其currentIndex 属性，如果是，请检查其下拉值，如果它是特殊值，请使用您自定义的函数可以从 here 获取并移动到所需的步骤。
@GuruprasadRao 感谢您的链接，检查当前索引以及是否检查了道具没有问题 - 但老实说，我并没有真正了解如何从链接添加自定义功能提供，至少它不起作用

标签： javascript jquery jquery-steps

【解决方案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

【讨论】：

【解决方案2】：

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

我在此附上link，这对您有帮助。

【讨论】：

感谢您的输入，这里的问题是：由于表单验证，我必须在跳过的步骤中以某种方式禁用所有表单字段。而且在我看来，我不能直接跳过两个步骤，你怎么看？

【解决方案3】：

我想出了一个基于 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);
}

【讨论】：