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

有一些事件稱為onStepChanging和onStepChanged ，可以將其傳遞給form.steps 。 您可以編寫一個函數來驗證您的表單和步驟，並基於currentIndex,newIndex觸發下一個選項卡。

我在這里附上了對您有幫助的鏈接 。

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