Javascript intro.js不适用于基于类的特定元素

我无法使用具有

class='test'

的特定元素启动

intro.js

。我正在使用

intro.js v0.9.0

根据文档，我按照下面的方式编写代码

 <li class="test" data-intro="first Step" data-step="1"><a href="#" data-toggle="tooltip" data-placement="bottom" title="Chart" id="chart-btn"><i class="fa fa-bar-chart-o fa-lg"></i></a></li>
 <li class="test123" data-intro="first Step" data-step="1"><a href="#" data-toggle="tooltip" data-placement="bottom" title="Reset" id="reset"><i class="fa fa-repeat fa-lg"></i></a></li>
 <li class="test" data-intro="second Step" data-step="2"><a href="#" data-toggle="tooltip" data-placement="bottom" title="Compute" id="category"><i class="fa fa-play fa-lg"></i></a></li>

 var intro = introJs();
      intro.setOptions({
        steps: [
          { 
            intro: "Hello world!"
          },
          {
            element: document.getElementById("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.'
          }
        ],
        showStepNumbers:false
      });

      intro.start();

它不起作用。我看了一些人的建议，我也尝试过这些方法，但它不起作用

---

如何修复此问题。

我使用

步骤实现，该步骤由
intro.js
插件选项提供，如
沿着这条路走

 <li class="test" data-intro="first Step" data-step="1"><a href="#" data-toggle="tooltip" data-placement="bottom" title="Chart" id="chart-btn"><i class="fa fa-bar-chart-o fa-lg"></i></a></li>
 <li class="test123" data-intro="first Step" data-step="1"><a href="#" data-toggle="tooltip" data-placement="bottom" title="Reset" id="reset"><i class="fa fa-repeat fa-lg"></i></a></li>
 <li class="test" data-intro="second Step" data-step="2"><a href="#" data-toggle="tooltip" data-placement="bottom" title="Compute" id="category"><i class="fa fa-play fa-lg"></i></a></li>

 var intro = introJs();
      intro.setOptions({
        steps: [
          { 
            intro: "Hello world!"
          },
          {
            element: document.getElementById("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.'
          }
        ],
        showStepNumbers:false
      });

      intro.start();

如果您看到，您可以看到introJs参数用于步骤/元素的场。因此，您的代码应该类似于：

<div class='test'>
   <div class="span6 test" data-step="2" data-intro="Ok, wasn't that fun?">
        <h4>Easy to Use</h4>
      </div>
  </div>


易于使用

现在是introJs（'.test'）.start（）；应该可以正常工作。
在将intro.js和introjs.css文件包含/链接到项目后，这里有一个完整的示例

$(document).ready(function startIntro() {
    var intro = introJs('body');
    intro.setOptions({
        steps: [
                  {
                      intro: "Hello world!"
                  },
                  {
                      intro: "You <b>don't need</b> to define element to focus, this is a floating tooltip."
                  },
                  {
                      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.'
                  }
            ]
    });
    intro.start();
});

$（文档）.ready（函数startIntro（）{
var intro=introJs（“主体”）；
intro.setOptions({
步骤：[
{
简介：“你好，世界！”
},
{
简介：“您不需要定义要聚焦的元素，这是一个浮动的工具提示。”
},
{
元素：document.querySelector（“#step1”），
简介：“这是一个工具提示。”
},
{
元素：document.querySelectorAll（'#step2'）[0]，
简介：“好吧，那不是很有趣吗？”，
位置：'右'
},
{
元素：'#步骤3'，
简介：“更多功能，更有趣。”，
位置：'左'
},
{
元素：'#步骤4'，
简介：“另一步。”，
位置：'底部'
},
{
元素：'#步骤5'，
简介：“获取它，使用它。”
}
]
});
开始（）；
});
基于他们提供的新API，属于
组
功能。因此，如果您添加了一个名为
data intro group
的属性并处理组名，您的示例就可以工作，如下所示：

<li data-intro-group="test" class="test" data-intro="first Step" data-step="1"><a href="#" data-toggle="tooltip" data-placement="bottom" title="Chart" id="chart-btn"><i class="fa fa-bar-chart-o fa-lg"></i></a></li>
<li data-intro-group="test123" class="test123" data-intro="first Step" data-step="1"><a href="#" data-toggle="tooltip" data-placement="bottom" title="Reset" id="reset"><i class="fa fa-repeat fa-lg"></i></a></li>
<li data-intro-group="test" class="test" data-intro="second Step" data-step="2"><a href="#" data-toggle="tooltip" data-placement="bottom" title="Compute" id="category"><i class="fa fa-play fa-lg"></i></a></li>





然后，为特定组启动
intro
，比如说
test
by:
introJs（）.start（'test'）

希望这有帮助
 您正在使用ID类在哪里？谢谢，真的很有帮助，我使用“document.querySelectorAll（“.sftpImport.step1”）[0]”按类解决多个场景步骤这一步对我最有效，我在introjs.com上找不到它的文档，所以谢谢！