javascript - 使用 intro.js 在步骤中触发函数

标签 javascript function intro.js

我已经尝试了这里的步骤: Step with click functionality in intro.js

获取在步骤中触发的函数。我没有成功执行函数,但教程仍在运行。最终目标是让函数触发按钮点击。谢谢你的帮助。

<script type="text/javascript">
  function startIntro(){
    var intro = introJs();
      intro.setOptions({
        steps: [
          {
            intro: "Welcome to the page!",
            onchange: function(){
                console.log("test");
            },
            onbeforechange: function() {
                console.log("before");
            }
          },
          {
            element: '#step1',
            intro: "You can start doing something by clicking the New Item button."
          },
          {
            element: '.thefilter',
            intro: "You can filter any of the stock items in the table by using the search fields ",
            position: 'bottom'
          }
        ]
      });
      intro.start();
  }
</script>

<a href="javascript:void(0);" onclick="startIntro();"><img style="position:fixed;" src="help.png" /></a>

最佳答案

我错过了示例中的某些内容,这些内容为我提供了所需的指导。

这是更新后的代码。

TLDR;删除了步骤中的内联 onchange 并将其附加到 intro.start 之前。有效!

<script type="text/javascript">
  function startIntro(){
    var intro = introJs();
      intro.setOptions({
        steps: [
          {
            intro: "Welcome to the page!"
          },
          {
            element: '#step1',
            intro: "You can start doing something by clicking the New Item button."
          },
          {
            element: '.thefilter',
            intro: "You can filter any of the stock items in the table by using the search fields ",
            position: 'bottom'
          }
        ]
      });
       intro.onbeforechange(function () {
      if (this._currentStep === 2) {
        console.log('what is happening')
        return false;
      }
    });
      intro.start();
  }
</script>

<a href="javascript:void(0);" onclick="startIntro();"><img style="position:fixed;" src="help.png" /></a>

关于javascript - 使用 intro.js 在步骤中触发函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53891489/

相关文章:

javascript - 如何使用 JavaScript 验证货币值(value)?

python - 如何获取Python函数返回的元素数量

css - Bootstrap IntroJS 步骤编号在 Bootstrap 3 中未正确对齐

javascript - Jquery事件捕获margin-left的变化

javascript - 使用 Jquery 和 ajax 更新 HTML 表

javascript - JHtmlArea 设置 html

c++ - 无法从 int main() 主体调用函数

c - 在 C 中将两个整数合并为 integer.decimal

php - 触发由父 View 引起的任何事件时退出 Tour - Intro.js

cookies - 如何仅在第一次访问网站时开始 intro.js 之旅