如何使用 gem 'intros-rails' 在 Rails 中创建导览答案

【问题标题】：How to create a guided tour in Rails with gem 'intros-rails'如何使用 gem 'intros-rails' 在 Rails 中创建导览
【发布时间】：2019-04-05 17:34:23
【问题描述】：

这几天一直在努力，我正在尝试使用 gem "introjs-rails" 在 Rails 中创建一个导览。 https://github.com/heelhook/intro.js-rails。以下内容与指南要求的内容之间的一些区别是指南希望将“//= 要求 introjs”放入 application.js，但我收到 Javascript 错误“introJs().start();是未定义的变量”，所以我将“//= require introjs”放在“Intro.js”文件中，这似乎可以解决它。但是当我启动页面时，我仍然没有收到弹出消息。

Application.html.erb

<head>
  <title>Workspace</title>
  <%= stylesheet_link_tag    'introjs', 'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'intro', 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
  <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
  <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
</head>

应用程序.scss

/*
 *= require introjs
 *= require_tree .
 *= require_self
*/

Index.html.erb

<h1 data-step="1" data-intro="This is a tooltip!">This is a Tool Tip!</h1>

Intro.js

//= require introjs
introJs().start();

Introjs.css

 *= require introjs

【问题讨论】：

标签： javascript ruby-on-rails ruby intro.js

【解决方案1】：

尝试以下方法：

Index.html.erb：

<a class='introduction-farm' href='#' data-intro='Hello step one!'></a>

Intro.js：

introJs(".introduction-farm").start();

正如您在评论中所建议的那样，过早加载脚本是您问题的根源：setTimeout(function() { introJs().start(); }, 3000);

对于您的 CSS 问题，很可能没有引用 jQuery，在这种情况下，您需要在 IntroJS、bootstrap 之前包含它：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

【讨论】：

嗯，不幸的是没有运气。
你能在启动应用时给我们看一下控制台日志吗！
哦，这很有趣。它说“给定选择器没有类”。我再次检查了代码，intro.js 和 index.html.erb 中的类是相同的。当我点击控制台中的全局错误时，它指向 "introJs(".introduction-farm").start();"
等等你说的“intro.js”是什么意思，你知道修改不是在intro.js里面完成的吗？为什么不试试我建议的HelloWorld 示例（如果对intro.js 进行了任何更改，请删除它们或使用原始文件）
我想出了其中的一部分。 JS 加载得太早，这就是它找不到类的原因。所以对于 intro.js，我输入了setTimeout(function() { introJs().start(); }, 3000);。看起来CSS没有被应用，因为这是我得到的截图。 imgur.com/a/plBpZFR 虽然取得了一些进展，但很兴奋。文本“一二”正是我为一些示例文本输入的内容。