Smart Wizard - только умножение на сброс первого экземпляра

Question

У меня есть форма с несколькими Smart Wizards , использующими увеличивающиеся UID для каждого. Я хочу перезапустить мастер до шага 1 при нажатии кнопок формы «Назад» или «Сброс» (внешние от мастеров). Поэтапный сброс происходит только в первом экземпляре Smart Wizard. Я попытался обновить свой JS, чтобы включить все идентификаторы, содержащие "smartwizard", но он по-прежнему нацелен только на первый.

В последней версии v5 несколько демо , то же самое / подобное поведение можно увидеть при продвижении шагов в обоих мастерах и нажатии кнопки «Отмена» на втором мастере, запускающем сброс только для первого мастера. введите код Smart Wizard (см. ссылки на источники для справки)? С этого момента мне нужно руководство, поэтому любое понимание приветствуется ...

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');
});

SmartWizard

      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 () с массивом идентификаторов.

Я все еще верю, что код может быть реорганизован для простоты, чтобы охватить все идентификаторы, содержащие "smartwizard", но это решило мою проблему с обеими внешними кнопками, и мне нужно только сохранить значения массива в одном месте, поскольку на страницу добавляется больше 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');
    });
});