Question

我无法使用intro.js的特定元素启动class='test'。我正在使用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参数是针对steps / elements的服务器场的。所以你的代码应该是这样的：

<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，$(document).ready(function(){ $('#dialog_content').dialog({ autoOpen:false }); $('#click_me').click(function(){ $('#dialog_content').dialog('open'); }); });功能中的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"></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"></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"></a></li>，例如：intro

希望这会有所帮助！

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

4 个答案: