Question

我正在使用jQuery插件'formwizard'，并希望允许用户跳转到该过程中的特定步骤。

我认为会做的是'show'方法：

$(function(){
    $("#linkId").click(function(){
        $("#demoForm").formwizard("show","newLocationId");
    });
});

但所有这一切都是在屏幕上显示步骤而不隐藏上一步。

如果在调用'show'之前还有另一种隐藏当前屏幕的方法，那么它将是完美的。

插件主页为FormWizard Homepage

任何熟悉此插件的人都知道如何使用方法跳转到特定步骤而不是从表单元素链接？

Answer 1

请记住在绑定到的元素事件上返回false ...

$(function(){
    $("#linkId").click(function(){
        $("#demoForm").formwizard("show","newLocationId");
        return false;
    });
});

这对我有用。

Answer 2

我花了几个小时试图让它今天上班。使用.formwizard("show","new_step")方法跳过步骤对我来说不起作用。我无法阻止转换到第3步并在.bind("step_shown",function(){...})方法中覆盖我的表单的第4步，因此我使用隐藏的输入“链接”类方法。当某个单选按钮（在步骤2中）被选为免费或付费帐户时，我嵌入了一个隐藏字段，这意味着可以完全跳过第3步（免费帐户不需要帐单明细）。我确定了跳转到使用隐藏输入上的“link”类的步骤。

DOM具有以下字段，该字段位于当前可见步骤的div ：

<input type="hidden" id="jump_to_fourth_step" value="fourthStep">

javascript具有以下内容：

$('input[name="account_type"]').click(function() {
  //add "link" class to jump to last step and hide billing fields in summary
  if($(this).attr("is_free")==true) {
    $("#jump_to_fourth_step").addClass("link");
    $(".billing_info").hide();
  }
  //remove class "link" from input and show billing fields in summary
  else {
    $('#jump_to_fourth_step').removeClass("link");
    $(".billing_info").show();
  }
});

请注意，此代码仅在步骤2上运行，因为单选按钮仅可用。当选择了免费帐户点击“下一步”时成功跳过步骤3，如果在步骤4使用了后退按钮，则用户返回步骤2.如果用户决定他们想要一个付费帐户并返回步骤如图2所示，隐藏的输入被删除，再次导致下一步显示第3步（并且结算信息将显示在摘要页面上）。

没有详细记录，但是一旦单击“下一步”按钮，插件将转到当前步骤中活动输入的“值”属性中的任何步骤。如上所示，值为fourthStep。而且，为了彻底，我只是测试并跳过任意数量的步骤，后退按钮将正确地让你回到正确的位置。

Answer 3

正如您从下面的工作示例中看到的那样，您正在做正确的事。

example code at thecodemine.org

您遇到的问题在大多数情况下与无效（X）HTML相关（在大多数情况下仅在基于webkit的浏览器中可见）。所以，如果我是你，我会尝试清理HTML，看看是否能修复它。使用以下验证器：_http：//validator.w3.org验证HTML。

希望这有帮助

跳到jQuery formwizard中的特定步骤

3 个答案: