javascript - 动态更新 FuelUX 向导步骤数

Question

我希望有人能帮助我解决这个问题。我正在使用 FuelUX 向导并希望动态添加 X 个步骤，其中 X 是用户在第一个屏幕上设置的数字。额外的步骤添加得很好，除了我不知道如何让向导知道它现在的步骤数与它开始时的步骤数不同——所以如果它从 3 个步骤开始，它仍然想在之后提交表单第 3 步，不管它现在有多少。

再次调用 $('#MyWizard').wizard() 似乎不起作用。在向导代码中有一个 numSteps 变量，但似乎无法从类外部访问它。 Rob Schmuecker ( http://www.robschmuecker.com/dynamic-steps-in-fuel-ux-wizard/ ) 的外部网站上也有此解决方案，但不幸的是它对我不起作用，并调用 $('#MyWizard').data('wizard', '') 正如他建议的那样，完全阻止向导前进。

有没有人对这个问题有任何建议/经验？我是 JS 等方面的新手，所以也许这很明显，我们将不胜感激!我添加步骤的代码如下:

var added_questions = 0;
function addStep()
{
  added_questions++;
  $("#end-of-questions-step-marker").before("<li id='#step-marker-q" + added_questions + "' data-target='#q" + added_questions + "'><span class='chevron'></span>Q" + added_questions + "</li>");
  $("#step3").before("<div class='step-pane' id='q" + added_questions + "'><fieldset id='q" + added_questions + "-fieldset' class='col-sm-12'></fieldset></div>");
  $("#q" + added_questions + "-fieldset").append(getQuestionPanel(added_questions));
}

Answer 1

我知道您正在寻找 FuelUX 2 的答案，但在即将推出的 FuelUX 版本 3 中，有一个名为 addSteps 的新方法。这正是你想要做的。您可能会查看该代码。这是在 FuelUX 3.0 中的(零索引)步骤​​ 2 添加一个 Pane 的方式:

$('#myWizard').wizard('addSteps', index, [
  {
    badge: 'badge-customicon',
    label: 'A Step Label',
    pane: '<div>Content</div>'
  }
]);

FuelUX 3出来了。