如何使用 javascript 转发 jQuery 步中的步骤

Question

这是我的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");
  }
})

Answer 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 被 returned 才能进入下一步 - 通过从 onStepChanging 内部调用 .steps('next')，我们只是递归地呼叫 onStepChanging。这样，如果在第一步并等待验证，它将 return false ，如果验证完成或在任何其他步骤，它将只是 return true （您可以添加 else ifs 如果你需要使用 AJAX 来验证 more 和每个全局变量）。当 AJAX 响应返回时，如果值是预期的值，我们设置全局变量以关闭该步骤的 AJAX 验证，然后我们调用 .steps('next') 继续下一个。有道理吗？

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

编辑：为了避免混淆，我使用了 if(data != 0) 因为我的测试 AJAX 文件只是 returned 一个 1 （假装 'expected value' 总是值我想看看）。

如何使用 javascript 转发 jQuery 步中的步骤

How to forward steps in jQuery-Steps using javascript

javascript

jquery

jquery-steps

---- 添加