单击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();
    }
});