如何使用 introjs 突出显示多个元素？答案

【问题标题】：How to highlight more than one element with introjs?如何使用 introjs 突出显示多个元素？
【发布时间】：2016-01-03 17:47:33
【问题描述】：

我想用 JS 库 intro.js 突出显示不同的 DOM 元素。问题似乎是我只能定义一个要突出显示的元素：

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

我没有找到任何让我选择超过 1 个元素的选项。我是否必须创建更多 introjs 对象的实例才能实现这一点？

【问题讨论】：

糟糕！尝试过 introjs 并且该标签不存在.. 没有想到 intro.js。谢谢！ :)
不错。检查我的答案。你应该传递节点而不是选择器字符串！
不可能，即使你们再创建一个 introjs 实例，它们也不会一起工作
@Amina，在下面查看我的答案
你的回答不行。 @david 希望在同一步骤中同时突出显示两个元素

标签： javascript jquery intro.js

【解决方案1】：

默认情况下，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 实例。

【讨论】：

【解决方案2】：

您应该传递节点（使用 document.___ 或 $('.class') ）而不仅仅是选择器。检查下面的sn-p。

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

【讨论】：