1

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

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

我是否遗漏了智能向导代码中“重置”键上事件处理的发生方式和位置（请参阅源链接以供参考）？我需要从这一点开始的指导，所以任何见解都值得赞赏......

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>
4

1 回答 1

0

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

我仍然相信为了简单起见，可以重构代码以包含所有包含“smartwizard”的 ID，但这解决了我与两个外部按钮有关的问题，并且随着更多智能向导添加到页面中，我只需要在一个位置维护数组值。

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');
    });
});
于 2020-06-24T02:05:45.727 回答