Question

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

on-tap

我没有找到任何让我选择超过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.'
              }
            ]

参考网址：
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()

您可以使用onchange事件同步两个intro.js实例。

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

2 个答案: