Question

我正在使用此Jquery插件创建类似向导的界面：

我在向导中有5个步骤。第一次加载向导时，第3步和第4步被隐藏。

当用户在步骤2中选择“是”单选按钮，然后单击“下一步”按钮时，它应该显示，启用并转到向导中的步骤4。
当用户在步骤2中选择“否”单选按钮，然后单击“下一步”按钮时，它应该显示，启用并转到向导中的步骤3。

我面临的问题是，隐藏的步骤正在按需显示，但显示为已禁用。结果，当我在步骤2上单击“下一步”时，显示了隐藏的步骤，但未启用该步骤，因此跳到了步骤5。

如何解决该问题以实现所需的行为？

这是我的代码：

<div id="smartwizard">
<ul>
    <li><a href="#step-1">Step 1<br /><small>Step 1</small></a></li>
    <li><a href="#step-2">Step 2<br /><small>Step 2</small></a></li>
    <li><a href="#step-3">Step 3<br /><small>Step 3</small></a></li>
    <li><a href="#step-4">Step 4<br /><small>Step 4</small></a></li>
    <li><a href="#step-5">Step 5<br /><small>Step 5</small></a></li>                
</ul>

<div>
    <div id="step-1" class="">
        This is the first step and it should be shown all the time.
    </div>
    <div id="step-2" class="">
        <div>Would you like to add more options?</div>
        <p>
        <input type="radio" name="yes_no" id="step2RadioYes" checked>&nbsp;Yes</input>
        </p>
        <p>
        <input type="radio" name="yes_no" id="step2RadioNo" >&nbsp;No</input>
        </p>
    </div>

    <div id="step-3" class="">
        This step is hidden on load, but should be shown and enabled if I select "No" in Step 2.
    </div>

    <div id="step-4" class="">
        This step is hidden on load, but should be shown and enabled if I select "Yes" in Step 2.
    </div>

    <div id="step-5" class="">
        This step is the final step.
    </div>
</div>

<script>
$('#smartwizard').smartWizard({
            selected: 0,
            theme: 'default',
            transitionEffect:'fade',
            showStepURLhash: false,
            contentCache: false,
            hiddenSteps: [2,3]
    });

$("#smartwizard").on("leaveStep", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {
        if(stepNumber === 1){
           if(document.getElementById('step2RadioYes').checked) {

           // Enable and go to step-4 if Yes is selected
           $('#smartwizard').smartWizard("stepState", [2], "disable");
           $('#smartwizard').smartWizard("stepState", [2], "hide");

           $('#smartwizard').smartWizard("stepState", [3], "enable");
           $('#smartwizard').smartWizard("stepState", [3], "show");
          }
          else if(document.getElementById('step2RadioNo').checked) {

           // Enable and go to step-4 if No is selected
           $('#smartwizard').smartWizard("stepState", [2], "enable");
           $('#smartwizard').smartWizard("stepState", [2], "show");

           $('#smartwizard').smartWizard("stepState", [3], "disable");
           $('#smartwizard').smartWizard("stepState", [3], "hide");
          }
       }
    });    
</script>

Answer 1

$('#step2RadioYes').on('change', function () {
    if ($(this).is(':checked')) {
        $('#smartwizard').smartWizard("stepState", [2], "disable");
        $('#smartwizard').smartWizard("stepState", [2], "hide");

        $('#smartwizard').smartWizard("stepState", [3], "enable");
        $('#smartwizard').smartWizard("stepState", [3], "show");
    } else{
        $('#smartwizard').smartWizard("stepState", [2], "enable");
        $('#smartwizard').smartWizard("stepState", [2], "show");

        $('#smartwizard').smartWizard("stepState", [3], "disable");
        $('#smartwizard').smartWizard("stepState", [3], "hide");
    }
});



$('#step2RadioYes').on('change', function () {
    if ($(this).is(':checked')) {
        $('#smartwizard').smartWizard("stepState", [2], "enable");
        $('#smartwizard').smartWizard("stepState", [2], "show");

        $('#smartwizard').smartWizard("stepState", [3], "disable");
        $('#smartwizard').smartWizard("stepState", [3], "hide");
    }else{
        $('#smartwizard').smartWizard("stepState", [2], "enable");
        $('#smartwizard').smartWizard("stepState", [2], "hide");

        $('#smartwizard').smartWizard("stepState", [3], "enablex");
        $('#smartwizard').smartWizard("stepState", [3], "show");
    }
});

Answer 2

为什么要等待单击下一步才能启用选项卡？只需将jquery事件添加到单选按钮选项中，一旦触发，它将根据您的需要显示和隐藏选项卡。

$('#step2RadioYes').click(function(){
     $('#smartwizard').smartWizard("stepState", [2], "disable");
     $('#smartwizard').smartWizard("stepState", [2], "hide");
     $('#smartwizard').smartWizard("stepState", [3], "enable");
     $('#smartwizard').smartWizard("stepState", [3], "show");
    
})
$('#step2RadioNo').click(function(){
     $('#smartwizard').smartWizard("stepState", [3], "disable");
     $('#smartwizard').smartWizard("stepState", [3], "hide");
     $('#smartwizard').smartWizard("stepState", [2], "enable");
     $('#smartwizard').smartWizard("stepState", [2], "show");
    
})

jQuery SmartWizard-显示步骤，但未启用

2 个答案: