Как выделить более одного элемента с introjs?

Question

У меня разные элементы DOM, которые я хочу выделить с помощью библиотеки JS intro.js. Проблема, кажется, что я могу просто определить один элемент, который необходимо выделить:

introjs.setOptions({ 
     steps: [ 
      { 
       element: '.element1', 
       intro: 'Lorem ipsum...', 
       position: 'bottom' 
      }, 
      { 
       element: '.element2', 
       intro: 'Lorem ipsum...', 
       position: 'top' 
      } 
     ] 
    }); 

Я не нашел любой вариант, который позволяет мне выбрать более чем 1 элемент. Должен ли я создавать дополнительные экземпляры объекта introjs, чтобы сделать это возможным?

Answer 1

Вы должны передать узел (используя document.___ или $('.class')) не только селектор. проверьте приведенный ниже фрагмент.

steps: [ 
       { 
       intro: "Hello world!" 
       }, 
       { 
       element: document.querySelector('#step1'), 
       intro: "This is a tooltip." 
       }, 
       { 
       element: document.querySelectorAll('#step2')[0], 
       intro: "Ok, wasn't that fun?", 
       position: 'right' 
       }, 
       { 
       element: '#step3', 
       intro: 'More features, more fun.', 
       position: 'left' 
       }, 
       { 
       element: '#step4', 
       intro: "Another step.", 
       position: 'bottom' 
       }, 
       { 
       element: '#step5', 
       intro: 'Get it, use it.' 
       } 
      ] 

URL ссылки:
https://github.com/usablica/intro.js/blob/master/example/programmatic/index.html

Answer 2

По умолчанию intro.js начать введение, путем добавления серого ящика слой к body документа. Вот почему, если вы попытаетесь дважды загрузить библиотеку intro.js, она не будет работать. Одновременно может отображаться только один шаг.

Если вы хотите, вы можете загрузить каждый из introJs в другой контейнер. И они могут работать вместе:

Вы можете сделать это, запустив introJs и указав родительский элемент. Например:

introJs($('h1').parent()[0]).setOptions({ 
    steps:[ 
    {element:$('h1')[0],intro:'hi',position:'bottom'}, 
    ]}).start(); 

a2=introJs($('h2').parent()[0]).setOptions({ 
    steps:[ 
    {element:$('h2'),intro:'hi',position:'bottom'}, 
]}).start() 

Вы можете синхронизировать оба экземпляра intro.js с помощью onchange события.