2

我正在使用 jQuery 插件“formwizard”并希望允许用户跳转到流程中的特定步骤。

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

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

但这所做的只是在屏幕上显示步骤而不隐藏上一步。

如果在调用“显示”之前有另一种方法可以隐藏当前屏幕，那将是完美的。

插件主页是FormWizard Homepage

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

4

3 回答 3

2

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

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

这对我有用。

于 2012-02-14T19:21:39.260 回答
1

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

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 步2 标记为这样，隐藏的输入被删除，再次导致下一步显示步骤 3（并且计费信息将显示在摘要页面上）。

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

于 2012-08-14T20:36:47.893 回答
0

从下面的工作示例中可以看出，您做得对。

thecodemine.org 上的示例代码

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

希望这可以帮助

于 2011-01-11T16:06:31.317 回答