Перейти к следующему шагу по щелчку элемента в 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(); 
    } 
});