javascript - 如何使用 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

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