Javascript 如何在一个网页中使用introJs设置两个介绍教程？

我想有两个单独的旅游在一个网页上使用introJs。

---

但在执行此操作时，一个巡更的数据步骤与另一个巡更的数据步骤是一致的。

简单地说，这是不可能的

---

您不能同时为整个页面创建两个巡更（

document.body

），相反，您可以为DOM上的单独元素创建两个单独的巡更。

我有过类似的情况，在页面中有两个面板。 每个面板都有其帮助部分。然而，当我点击一个帮助部分时，介绍js在另一个部分也被激活了。 每次启动帮助时，我都会删除所有的intro-js属性，这样一个帮助部分就无法激活另一个

---

$（'[data intro]'）。removeAttr（'data-intro data position data step'）

设置不同的实例和步骤，并将它们称为intro1和intro2（或任何您想要的）

然后，您可以分别作为intro1.start（）和intro2.start（）触发它们

请参阅代码以设置以下步骤：

var intro1 = introJs();
intro1.setOptions({
    tooltipPosition : 'top',
    steps: [
        {
            element: '#intro1_step1',
            intro: 'Welcome to your example.com dashboard, where you can update your skills, your availability, and your professional details so that ...',
            position: 'top'
        },            {
            element: '#intro1_step2',
            intro: 'Your profile contains important information which is important to complete so that...',
            position: 'bottom'
        },
        {
            element: '#intro1_step3',
            intro: 'Make sure your attribute is included in your profile because the client may express a preference.',
            position: 'top'
        },
        {
            element: '#intro1_step4',
            intro: 'Click here to add a photograph of yourself.',
            position: 'top'
        },
        {
            element: '#intro1_step5',
            intro: 'Your photograph will appear when your profile matches a ...',
            position: 'top'
        },
        {
            element: '#intro1_step6',
            intro: 'Take example.com with you, on your Android or Apple phone by clicking here.',
            position: 'top'
        }
    ]
});
var intro2 = introJs();
intro1.setOptions({
    tooltipPosition : 'top',
    steps: [
        {
            element: '#intro2_step1',
            intro: 'Welcome to your example2.com dashboard, where...',
            position: 'top'
        },            {
            element: '#intro2_step2',
            intro: 'Your...',
            position: 'bottom'
        },
        {
            element: '#intro2_step3',
            intro: 'Make sure...',
            position: 'top'
        },
        {
            element: '#intro2_step4',
            intro: 'Click here to...',
            position: 'top'
        },
        {
            element: '#intro2_step5',
            intro: 'In this step...',
            position: 'top'
        },
        {
            element: '#intro2_step6',
            intro: 'Take example2.com with you, on your Android or Apple phone by clicking here.',
            position: 'top'
        }
    ]
});

好处是你不需要在html中嵌入太多的元信息，只要

<p id="intro1_step1">Blah Blah Blah</p>

胡说八道

---

像@brianlmerritt一样，我制作了两个程序化的intro.js，并用不同的按钮启动它

<a href="#" class="btn btn-flat success" id="encomienda_help">
<a href="#" class="btn btn-flat success" id="bitacora_help">


[...]

<script type="text/javascript">
  document.getElementById('encomienda_help').onclick = function() {
    var intro = introJs();
    intro.setOptions({
      doneLabel: 'Siguiente Página',
      steps: [
      {
        element: document.querySelectorAll('#encomienda_step_1')[0],
        intro: "This is the help text for encomienda."
      },
      {
        element: document.querySelectorAll('#encomienda_step_2')[0],
        intro: "This is another help text for encomienda.",
        position: "top"
      }
      ]
    });
    intro.start().oncomplete(function() {
      window.location.href = '/ruta1?multipage=true';
    });
  };

  document.getElementById('bitacora_help').onclick = function() {
    var intro = introJs();
    intro.setOptions({
      doneLabel: 'Siguiente Página',
      steps: [
      {
        element: document.querySelectorAll('#bitacora_step_1')[0],
        intro: "This is the help text for bitácora."
      }
      ]
    });
    intro.start().oncomplete(function() {
      window.location.href = '/ruta2?multipage=true';
    });
  };
</script>

[...]
document.getElementById（'encomienda_help'）。onclick=function（）{
var intro=introJs（）；
intro.setOptions({
doneLabel：“Siguiente Página”，
步骤：[
{
元素：document.querySelectorAll（'#encomienda_step_1'）[0]，
简介：“这是Enomienda的帮助文本。”
},
{
元素：document.querySelectorAll（'#encomienda_step_2'）[0]，
简介：“这是encomienda的另一个帮助文本。”，
位置：“顶部”
}
]
});
intro.start（）.oncomplete（函数（）{
window.location.href='/ruta1？多页=true'；
});
};
document.getElementById（'bitacora\u help'）。onclick=function（）{
var intro=introJs（）；
intro.setOptions({
doneLabel：“Siguiente Página”，
步骤：[
{
元素：document.querySelectorAll（'#bitacora_step_1'）[0]，
简介：“这是比特科拉的帮助文本。”
}
]
});
intro.start（）.oncomplete（函数（）{
window.location.href='/ruta2？多页=true'；
});
};

元素类中是否有类似于tour id的内容可以与数据步骤一起提供？这也是设置选项的一个很好的示例。非常感谢！