javascript - Bootstrap 中的阶段性捐赠表格

Question

我一直在尝试在 Bootstrap 中创建分阶段捐赠表单，您可以在其中使用前进和后退按钮移动到同一表单的另一部分。它的顶部会有一个很好的指示器，表示您处于完成的哪一步。阶段性捐赠表格平均可提高 4.8% 的捐赠率，所以我真的很想拥有它。

我找到了一个 tutorial online这样做非常好，但它有一些问题我希望有人可以帮助我修复(链接中的代码):

1) 如果与另一个并排放置在一个列中，当按下下一个按钮时它会出现故障，将内容向下移动一行。

2) 我无法应用 CSS min-height 属性并在按下下一个按钮后使其保持为真。这将使表单的每个部分保持相同的高度，并使底部的按钮保持在相同的位置。

3) 它不包含后退按钮的 javascript。

4) 我真的不需要表单验证，所以它是无用的。

感谢你们能给我的任何帮助，我知道在一个问题上寻求很多帮助，但 JS 不是我的专长，它是慈善机构的无偿工作。

Answer 1

对于后退按钮，您需要做的是创建一个新按钮以转到上一步并将其添加到 HTML 以用于第二步和第三步。然后，您基本上可以复制 nextBtn 功能并将其重新用于上一个按钮(但您可以删除输入验证，因为上一个按钮不需要它)。

这是按钮代码:

<button class="btn btn-primary prevBtn btn-lg pull-left" type="button">Back</button>

和 Javascript:

allPrevBtn.click(function(){
      var curStep = $(this).closest(".setup-content"),
          curStepBtn = curStep.attr("id"),
          prevStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().prev().children("a");

          prevStepWizard.trigger('click');
  });

Working example