使用 BS-stepper 检索当前步骤答案

【问题标题】：Retrieving the current step with BS-stepper使用 BS-stepper 检索当前步骤
【发布时间】：2021-11-18 20:01:28
【问题描述】：

知道如何使用bs-stepper 获取当前页面吗？我已经尝试了一个小时来处理这个问题。

现在的代码：

<script>
    var stepper = new Stepper($('.bs-stepper')[0]);
</script>

提前致谢！

【问题讨论】：

监听事件'shown.bs-stepper' 然后将event.detailindexStep 存储在元素的.data 中，以便您可以随时阅读。

标签： jquery bootstrap-5

【解决方案1】：

步进器实例有一个“私有”但可访问的属性_currentIndex。看这支笔：https://codepen.io/Hazzamanic/pen/KKvJqKR或下面的代码

你也可以监听一个阶跃变化：

var stepperElement = document.getElementById('stepper');
var stepper = new Stepper(stepperElement);
// get current index from stepper
var currentIndex = stepper._currentIndex;

stepperElement.addEventListener('shown.bs-stepper', function (event) {
  console.log('Moved to step ' + event.detail.indexStep)
})

请注意，事件被添加到元素，而不是 Stepper 的实例。此外，如果您使用的是 jquery，则需要使用 .on() 绑定事件或检索底层 dom 元素，如下所示：

$("#stepper")[0].addEventListener('shown.bs-stepper', function (event) {
  console.log('Moved to step ' + event.detail.indexStep)
})

【讨论】：

我应该如何到达它？
这是一支笔：codepen.io/Hazzamanic/pen/KKvJqKR?editors=1111
好的，这支笔工作正常。如何为 stepper._currentIndex 调用 onchange 事件？
已经更新了我的答案，你可以听听变化的步骤
我需要根据当前步骤隐藏/显示元素。看到你编辑了。我猜if(event.details.indexStep == NUMBER) { do smth} 会发生这种情况？

【解决方案2】：

试试这个

<script>
var stepper = new Stepper($('.bs-stepper')[0]);
let curPage = stepper._currentIndex;
</script>

【讨论】：

那行得通！如何为 stepper._currentIndex 调用 onchange 事件？