Question

所以我对JQuery步骤有这个问题，在我的第一步我禁用了下一个按钮强制用户点击2个按钮：选项1或选项2。当用户点击2个按钮中的任何一个时，它将进入下一步（步骤2）。但是当用户点击任何这些按钮时，我不知道如何触发事件更改步骤。知道使用什么功能吗？

Answer 1

你是指这样的东西还是按钮点击后的实际代码？

    $(document).on('click', '.class', function()
    {
        show following step/hide current step?
        clear current html - append next steps html dynamically?
    });

很难猜出你想要什么，试着更具体地回答你的问题。

Answer 2

所以，我今天实现了这个（如果你指的是jQuery步骤）：你可以做的如下。（您可能不需要所有细节，例如transitionalEffects - 它就是我在实现中所拥有的）。

$("#steps").steps({
    headerTag: "h3",
    bodyTag: "section",
    enableAllSteps: true,
    transitionEffect: "slide",
    stepsOrientation: "vertical",

    onStepChanged: function(event, currentIndex, priorIndex)
    {
        alert('On step changed'); // you can see the step change was picked up
        var current = $("#steps").steps("getCurrentStep"); // get the current step            
        if(current.title == "My Step Two") // see if it matches the name of the step
            alert('Step two was selected');
    }

});

以下是您的HTML可能的步骤：

         <div id="steps">
               <h3>My Step One</h3>
                  <section id="stepOne">
                    <!-- step one code -->
                  </section>
               <h3>My Step Two</h3>
                  <section id="stepTwo">
                      <!-- step two code -->
                  </section>
         </div>

这样做是为了监听名为onStepChanged的事件。然后，您可以调用名为getCurrentStep的方法，该方法返回整个步骤对象。然后，您可以询问步骤的title，看看它是否与您的步骤div标签中的内容匹配。

希望这能满足您的需求。

单击按钮更改步骤 - jquery步骤

2 个答案: