javascript - 单击 introJS 中的元素转到下一步

Question

我正在使用 angularjs 构建一个应用程序，我在其中使用 intro.js 进行产品展示。

我有一个要求，当用户点击一个特定的元素时，intro.js 应该关注那个特定的元素，而不考虑下一个元素。

因此，如果用户在游览中位于元素 1 上，并单击元素 3，则用户应导航到元素 3，跳过元素 2。

我怎样才能实现这个功能？

Answer 1

Introjs 具有转到特定步骤的 goToStep 方法 (introJs().goToStep(2).start())。您可以使用事件监听器来监听对元素的点击，并从该元素的关联步骤启动 introjs。

例子:

var intro = introJs();
    intro.setOptions({
        steps: [
            {
                element: '#step1',
                intro: 'Intro #2 text',        
            },
            {
                element: '#step2',
               intro: "Intro #2 text",     
            }]
})


$('.element-to-watch').on('click', function() {
    intro.exit(); // 
    if ($(this).attr("id") != 'step1') {
        let num =  $(this).attr("id").match(/\d+/)[0];
        intro.goToStep(num-1).start();
    }
    else {
        intro.start();
    }
});