JQuery SmartWizard - 正在显示步骤，但未启用

问题描述 投票：1回答：1

我正在使用这个Jquery插件创建一个类似于向导的界面：

JQuery Bootstrap Smart Wizard

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

  1. 当用户在步骤2中选择“是”单选按钮然后单击“下一步”按钮时，它应显示，启用并转到向导中的步骤4。
  2. 当用户在步骤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>
javascript jquery smart-wizard
1个回答
2
投票

leaveStep事件不提供重置next / prev步骤的可能性。我可能会建议一个解决方法：

 setTimeout(function() {
    $('#smartwizard').data('smartWizard')._showStep(3); // go to step 3....
 }, 50);


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

$("#smartwizard").on("leaveStep", function (e, anchorObject, stepNumber, stepDirection) {
    $("#smartwizard").data('nextStep', stepNumber + 1);
    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");

            setTimeout(function() {
                $('#smartwizard').data('smartWizard')._showStep(3);
            }, 50);

        } else {

            // 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");

            setTimeout(function() {
                $('#smartwizard').data('smartWizard')._showStep(2);
            }, 50);
        }
    }
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/techlab/SmartWizard/master/dist/css/smart_wizard.min.css">
<script src="https://rawgit.com/techlab/SmartWizard/master/dist/js/jquery.smartWizard.js"></script>

<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>
</div>

没有setTimeout的不同方法可以基于重新映射内部方法_showNext / _showPrevious。 Perahps它解决了这个问题，但它也是一个强烈的变化............

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

function changeDirection(obj, newIdx) {
    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");

        obj._loadStepContent(newIdx);
    } else {
        // 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");

        obj._loadStepContent(newIdx);
    }
}

$("#smartwizard").data('smartWizard')._showNext_orig = $("#smartwizard").data('smartWizard')._showNext;
$("#smartwizard").data('smartWizard')._showNext = function () {
    if (this.current_index === 1) {
        changeDirection(this, 3);
    } else {
        $("#smartwizard").data('smartWizard')._showNext_orig();
    }
    return true;
}
$("#smartwizard").data('smartWizard')._showPrevious_orig = $("#smartwizard").data('smartWizard')._showPrevious;
$("#smartwizard").data('smartWizard')._showPrevious = function () {
    if (this.current_index === 3) {
        changeDirection(this, 1);
    } else {
        $("#smartwizard").data('smartWizard')._showPrevious_orig();
    }
    return true;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/techlab/SmartWizard/master/dist/css/smart_wizard.min.css">
<script src="https://rawgit.com/techlab/SmartWizard/master/dist/js/jquery.smartWizard.js"></script>

<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>
</div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.