多实例Smart Wizard仅重置首个实例问题求助

我完全懂你碰到的糟心情况——多个带递增UID的Smart Wizard放在表单里，点外部的Back或Reset按钮，居然只有第一个向导回到Step 1，剩下的纹丝不动，连官方v5的多实例Demo都没处理这个场景对吧？咱们来拆解问题，一步步搞定它。

问题根源 #

Smart Wizard v5的每个实例都是独立绑定到对应DOM元素的，不管你用原生JS还是jQuery版本，直接用全局选择器调用reset方法时，默认只会作用在第一个匹配的元素上，因为它没有全局统一管理所有实例的机制，每个向导都是各自为政的。

解决方案：遍历所有实例逐个重置 #

这里分两种场景给你方案，按需选择：

场景1：初始化时主动保存实例（推荐）

在初始化所有Smart Wizard的时候，把每个实例存到一个数组里，后续重置时直接遍历数组调用方法，最稳妥：

// 初始化时保存所有向导实例
const allWizards = [];

// 选中所有带smartwizard关键字的DOM元素并初始化
document.querySelectorAll('[id*="smartwizard"]').forEach(wizardEl => {
  const wizardInstance = new SmartWizard(wizardEl, {
    selected: 0, // 默认停在第一步（注意v5的步骤索引是0-based）
    // 你的其他配置项...
  });
  allWizards.push(wizardInstance);
});

// 给外部Reset按钮绑定点击事件
document.getElementById('your-reset-button-id').addEventListener('click', () => {
  allWizards.forEach(wizard => {
    // 调用reset方法回到初始步骤（也就是你设置的selected:0，对应Step1）
    wizard.reset();
    // 如果reset不生效，也可以直接跳转到第一步：wizard.goToStep(1); // 这里goToStep是1-based
  });
});

场景2：从DOM元素直接获取已初始化的实例

如果之前没保存实例，也可以通过Smart Wizard挂载在DOM元素上的smartWizard属性直接获取实例，不用重新初始化：

document.getElementById('your-reset-button-id').addEventListener('click', () => {
  document.querySelectorAll('[id*="smartwizard"]').forEach(wizardEl => {
    // 检查该元素是否已初始化Smart Wizard实例
    if (wizardEl.smartWizard) {
      wizardEl.smartWizard.reset();
      // 或者：wizardEl.smartWizard.goToStep(1);
    }
  });
});

如果你用的是jQuery版本的Smart Wizard

之前你可能直接写了$('[id*="smartwizard"]').smartWizard('reset')，这只会处理第一个元素，要改成遍历每个元素：

$('#your-reset-button-id').click(function() {
  $('[id*="smartwizard"]').each(function() {
    $(this).smartWizard('reset');
  });
});

关键提醒 #

• 确认所有Smart Wizard元素都完成了初始化，不然smartWizard属性会不存在。
• 注意v5的步骤索引：selected配置是0-based（0对应Step1），但goToStep方法的参数是1-based（1对应Step1），调用时别搞混了。

内容的提问来源于stack exchange，提问作者SubliminalPresence