如何使用Introjs突出顯示多個元素？

Question

我想使用JS庫intro.js突出顯示不同的DOM元素。 問題似乎是我只能定義一個要突出顯示的元素：

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

我沒有找到讓我選擇1個以上元素的選項。 我是否必須創建更多introjs對象實例才能實現這一點？

Answer 1

您不僅應通過選擇器，還應傳遞Node（使用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.'
              }
            ]

參考網址：
https://github.com/usablica/intro.js/blob/master/example/programmatic/index.html

Answer 2

默認情況下，intro.js通過在文檔body中添加一個灰色框圖層來啟動該簡介。 這就是為什么如果您嘗試兩次加載intro.js庫，它將無法正常工作。 一次只能顯示一個步驟。

如果需要，可以將每個introJ加載到另一個容器。 他們可以一起工作：

您可以通過啟動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()

您可以使用onchange事件同步兩個intro.js實例。