如何使用 javascript 在 jQuery-Steps 中转发步骤答案

【问题标题】：How to forward steps in jQuery-Steps using javascript如何使用 javascript 在 jQuery-Steps 中转发步骤
【发布时间】：2017-07-13 21:56:45
【问题描述】：

这是我的 JS 代码，我想使用 javascript 来制作我的wizard 下一步但我不知道我应该写什么代码。

$("#wizard").steps({
  headerTag: "h3",
  bodyTag: "section",
  transitionEffect: "slideLeft",
  autoFocus: true,
  onStepChanging: function(e, currentIndex, newIndex){
    // use ajax to check if something is correct
    var req = ocpu.call("XXX",{},function(session){
    }).done(function(){
      // THIS IS WHERE I NEED CODE TO LET THE #WIZARD TO FORWARD TO NEXT STEP BECAUSE THE FOLLOWING RETURN TRUE WON'T BE WORKING.
    }) 
    // return true;
  }
});

---- 添加

我不认为 $("#wizard").steps("next");在onStepChanging 工作。例如，

HTML：

<div id="wizard">
  <h3>Step-1</h3>
  <section>
  First
  </section>
  <h3>Step-2</h3>
  <section>
  Second
  </section>
</div>

JS：

$("#wizard").steps({
  headerTag: "h3",
  bodyTag: "section",  
  transitionEffect: "slideLeft",
  autoFocus: true,
  onStepChanging: function(e, currentIndex, newIndex){
    console.log(currentIndex) // returns many many 0s but cannot go to 1.
    $("#wizard").steps("next");
  }
})

【问题讨论】：

jquery 步骤插件将对象作为参数，而不是字符串。
documentation 表明解决方案可能是 $("#wizard").steps("next")。
你能发布你的html吗？
@Xufox 对我来说似乎是正确的。下一次，也许看看 API，尤其是只有 11 种方法......
@Xufox 不，我不认为$("#wizard").steps("next") 有效。请查看更新。

标签： javascript jquery jquery-steps

【解决方案1】：

在没有 Steps 库的情况下编写它似乎更容易，但无论如何，以下应该允许这个过程工作。

首先，我使用了与您相同的 HTML，包括 jQuery 和 jQuery Steps 插件，然后将 JS 修改为：

var validatedStepOne = false;

$("#wizard").steps({
  headerTag: "h3",
  bodyTag: "section",  
  transitionEffect: "slideLeft",
  autoFocus: true,
  onStepChanging: function(e, currentIndex, newIndex){
    if(currentIndex == 0 && !validatedStepOne) {
      $.post('ajax.php', {var: 'expected value'}, function(data) {
        if(data != 0) {
          validatedStepOne = true;
          $('#wizard').steps('next');
        }
        else {
          alert('ERROR, unexpected value');
        }
      });
      return false;
    }
    return true;
  }
});

在代码中，您会注意到我有一个全局变量 (validatedStepOne) 来存储第一条信息是否已通过 AJAX 验证。最初的问题是onStepChanging 要求返回true 以进行下一步——通过从onStepChanging 内部调用.steps('next')，我们只是递归调用onStepChanging。这样，如果在第一步等待验证，它将返回false，如果验证完成或在任何其他步骤，它将简单地返回true（如果您需要使用AJAX进行验证，您可以添加else ifs更多，每个都有一个全局变量）。当 AJAX 响应返回时，如果该值是预期值，我们设置全局变量以关闭该步骤的 AJAX 验证，然后我们调用.steps('next') 继续下一个。有意义吗？

在这段代码中，您显然需要修改 AJAX 调用，但它应该是相同的概念 - 只需将全局 validatedStepOne 变量设置为 true 并在之后调用 .steps('next')。

编辑：为了避免混淆，我使用了if(data != 0)，因为我的测试 AJAX 文件只返回了 1（假装“预期值”始终是我想要看到的值）。

【讨论】：