智能向导 - 倍数重设一审

Question

我有一个包含多个 Smart Wizards 的表单，每个表单都使用递增的 UID。单击表单后退或重置按钮（向导外部）时，我想将向导重新启动到步骤 1。步骤重置仅发生在智能向导的第一个实例上。我尝试更新我的 JS 以包含所有包含 "smartwizard" 的 ID，但它仍然只针对第一个。

在最新的 v5 multiple demo 上，在两个向导上推进步骤并在第二个向导上单击取消时可以看到相同/相似的行为，仅在第一个向导上触发重置。

我是否遗漏了有关智能向导代码中 "reset" 键的事件处理方式和位置的信息（请参阅源链接以供参考）？我需要从这一点开始的指导，所以任何见解都将受到赞赏...

jQuery / JS文件

//FUNCTIONS FOR THE FORM BUTTONS
$('#back-button').on('click', function(event) {
    $('[id*="smartwizard"]').smartWizard('reset');
});

$('#reset-button').on('click', function(event) { // Reset form to initial state
    $('[id*="smartwizard"]').smartWizard('reset');
});

智能向导

      key: "reset",
  value: function reset() {
    // Reset all
    this._setURLHash('#');

    this._initOptions();

    this._initLoad();
  }

HTML 文件

//FORM SNIPPET
                                <ul>
                                    <li class="process" id="process1">
                                        <div id="smartwizard">
                                            <ul class="nav">
                                                <li class="nav-item">
                                                    <a class="nav-link" href="#step-1">
                                                        <strong>Step 1</strong> <h4>Introduction</h4>
                                                    </a>
                                                </li>
                                            </ul>

                                            <div class="tab-content">
                                                <div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">
                                                    <h3>Step 1 Content</h3>
                                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                                                </div>
                                                <div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">
                                                    <h3>Step 2 Content</h3>
                                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>


                                <ul>
                                    <li class="process" id="process2">
                                        <div id="smartwizard2">
                                            <ul class="nav">
                                                <li class="nav-item">
                                                    <a class="nav-link" href="#step-1">
                                                        <strong>Step 1</strong> <h4>Introduction</h4>
                                                    </a>
                                                </li>
                                            </ul>

                                            <div class="tab-content">
                                                <div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">
                                                    <h3>Step 1 Content</h3>
                                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                                                </div>
                                                <div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">
                                                    <h3>Step 2 Content</h3>
                                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="buttons">
        <button id="back-button" type="button">BACK</button>
        <button id="reset-button" type="reset">RESET</button>
    </div>

Answer 1

幸运的是，我找到了一些关于如何使用 .each() 和 ID 数组遍历所有智能向导的灵感。

我仍然相信为了简单起见可以重构代码以包含所有包含“smartwizard”的 ID，但这解决了我的两个外部按钮的问题，而且我只需要在一个地方维护数组值，因为更多的 Smart Wizards添加到页面。

var wizard = ["smartwizard", "smartwizard2"];

$('#back-button').on('click', function(event) { // Undo last selection and reset steps
    $.each(wizard, function(i, val) {
        $("#" + val).smartWizard('reset');
    });
});


$('#reset-button').on('click', function(event) { // Reset steps to initial state
    $.each(wizard, function( i, val ) {
        $("#" + val).smartWizard('reset');
    });
});

智能向导 - 倍数重设一审

Smart Wizard - Multiples Only Resetting First Instance

jquery

smart-wizard