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

Question

我无法以具有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>

我试着像这样开始intro

 introJs(".test").start();

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

我该如何解决这个问题。

Answer 1

我使用steps 实现，它由intro.js 插件选项提供，如 以下方式。

 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();

Answer 2

如果您看到 ，您可以看到 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();应该可以正常工作。

Answer 3

这是一个完整的示例，在您将 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();
});

Answer 4

基于他们提供的新 API，introducing an example 的 group 功能。因此，如果您添加一个名为 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：introJs().start('test');

希望这会有所帮助！