Question

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

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

你们有没有解决这个问题？

我希望您收到我的问题，如果您确实需要其他信息，请告诉我。

谢谢！

Answer 1

在public

中

将课程添加到jquery.steps.js（第1037行）

更改功能<ul role=\"tablist\" class=\"tablist\"></ul>＆amp; 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

Answer 2

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

我附上link以获得相同的帮助。

Answer 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);
}

jQuery.steps跳过一步

3 个答案: