我正在使用Bootstrap Tour，设置非常简单。
这些是说明：
// Instance the tour
var tour = new Tour({
steps: [
{
element: "#my-element",
title: "Title of my step",
content: "Content of my step"
},
{
element: "#my-other-element",
title: "Title of my step",
content: "Content of my step"
}
]});
// Initialize the tour
tour.init();
// Start the tour
tour.start();
在我的情况下，我有一个Profiles#Index，Profiles#Show和Dashboard#Index - 所有这些元素都有我想要进行巡视的不同元素。所以我需要为所有不同的动作/视图指定不同的元素。
我也只想在以下条件下触发巡视：
current_user.sign_in_count < 2确定）。我正在使用Devise，仅供参考。
我现在将默认JS放在我的app/assets/javascripts/profiles.js中。我应该把它移到其他地方才能达到我的上述条件吗？
修改1
实际上，我认为它会正常工作，但我根本无法让它工作。
我在Profiles#Show页面上并且巡视不会触发。这是它的设置方式：
这是我的application.html.erb：
<%= stylesheet_link_tag "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/css/bootstrap-tour.min.css", 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/js/bootstrap-tour.min.js", 'application', 'data-turbolinks-track': 'reload' %>
这是我的application.js：
$(document).on('turbolinks:load', function() {
var tour = new Tour({
backdrop: true,
steps: [
{
element: "#ratings-controls",
title: "Ratings Controls",
content: "Here you can rate this recruit so you can easily remember how they performed."
},
{
element: "div.action-buttons a#favorite-btn",
title: "Favorite",
content: "Here you can easily favorite a player"
},
{
element: "a.my-favorites",
title: "My Favorites",
content: "After you favorite a player, they automagically get added to your list of favorites -- which you can easily view here."
}
]});
// Initialize the tour
tour.init();
// Start the tour
tour.start();
});
我最初在我的app/assets/javascripts/profiles.js中有这个，但当它停止工作时，我将其移至application.js只是为了确保其他内容没有覆盖它。
在我的Profiles#Show中，我确实拥有所有这3个元素，正如您在下面呈现的HTML中所看到的那样：
<div id="ratings-controls" class="profile-data">
<table class="table table-condensed">
<tbody>
<tr>
<td>
<p>
<button type="button" class="btn btn-success m-r-sm slider-step-value" id="slider-step-value-speed-wacky-dip-st-george-s-college-bcdda202-c498-4baa-867d-200662fc785b" data-speed-value="0">0</button>
Speed
</p>
<div id="slider-speed" class="slider"></div>
</td>
<td>
<p>
<button type="button" class="btn btn-info m-r-sm slider-step-value" id="slider-step-value-tackling-wacky-dip-st-george-s-college-bcdda202-c498-4baa-867d-200662fc785b" data-tackling-value="0">0</button>
Tackling
</p>
<div id="slider-tackling" class="slider"></div>
</td>
</tr>
<tr>
<td>
<p>
<button type="button" class="btn btn-primary m-r-sm slider-step-value" id="slider-step-value-dribbling-wacky-dip-st-george-s-college-bcdda202-c498-4baa-867d-200662fc785b" data-dribbling-value="0">0</button>
Dribbling
</p>
<div id="slider-dribbling" class="slider"></div>
</td>
<td>
<p>
<button type="button" class="btn btn-warning m-r-sm slider-step-value" id="slider-step-value-passing-wacky-dip-st-george-s-college-bcdda202-c498-4baa-867d-200662fc785b" data-passing-value="0">0</button>
Passing
</p>
<div id="slider-passing" class="slider"></div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="action-buttons">
<a class="btn btn-xs btn-success" id="favorite-btn-29" data-remote="true" rel="nofollow" data-method="post" href="/profiles/wacky-dip-st-george-s-college-bcdda202-c498-4baa-867d-200662fc785b/favorite"><i class='fa fa-thumbs-up'></i> Favorite</a>
</div>
<a class="my-favorites" href="/profiles?filter=favorites">
<i class="fa fa-list"></i> My Favorites
</a>
此外，Bootstrap Tour CSS＆amp; JS被包含在我呈现的HTML中。
所以第一个问题是......我怎么能让这个工作？然后我可以找到其他人。
修改2
我在application.js添加了一些调试语句，结果就是这些。
这就是我的application.js现在的样子：
$(document).on('turbolinks:load', function() {
console.log('Turblinks Has Loaded -- This is Before Tour is Initialized.')
var tour = new Tour({
backdrop: true,
steps: [
{
element: "#ratings-controls",
title: "Ratings Controls",
content: "Here you can rate this recruit so you can easily remember how they performed."
},
{
element: "div.action-buttons a#favorite-btn",
title: "Favorite",
content: "Here you can easily favorite a player"
},
{
element: "a.my-favorites",
title: "My Favorites",
content: "After you favorite a player, they automagically get added to your list of favorites -- which you can easily view here."
}
]});
// Initialize the tour
tour.init();
console.log('This is after Tour has been initialized.')
// Start the tour
tour.start();
console.log('This is after Tour has been started.')
});
Turblinks Has Loaded -- This is Before Tour is Initialized.
bootstrap-tour.min.js:22 Uncaught TypeError: Cannot read property 'extend' of undefined(…)
可能导致此问题的原因以及如何进一步调试？该错误似乎在bootstrap-tour.min.js文件中。
答案 0 :(得分：1)
在阅读Bootstrap Tour docs之后，听起来您的问题可能就是Bootstrap tour在本地存储中保存cookie以跟踪用户在巡回演出中的进度。换句话说，巡回赛不会开始的原因是因为Bootstrap巡演在你的浏览器本地存储中看起来并认为你已经完成了。因此，要解决此问题，您有三种选择，具体取决于您的具体情况：
强制Bootstrap游览不使用存储
// Instance the tour
var tour = new Tour({
storage: false,
steps: [ ...]
]});
或
强制游览开始
// Start the tour
tour.start(true);
或
强制巡视重启
// Restart the tour
tour.restart();
我根据上面提供的评论和一些调试做了一些假设，看起来你的javascript文件没有以正确的顺序或方式包含。最近Rails 5对turbolinks的改变使这一点变得更加复杂。在轨道的快速原型设计世界中，当我转向轻量级宝石以包含资产时。在你的情况下，我建议：
<强> application.html.erb
<%= stylesheet_link_tag "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/css/bootstrap-tour.min.css", 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/js/bootstrap-tour.min.js", 'application', 'data-turbolinks-track': 'reload' %>
<强>的Gemfile
gem 'bootstrap-tour-rails'
<强>的application.js
//= require bootstrap-tour
<强> application.css
*= require bootstrap-tour
<击>
答案 1 :(得分：1)
所以我没有看到你包括bootstrap.js，所以你可能会错过这个。在使用bootstrap-tour.js之前包含它，因为这取决于bootstrap.js。查看overview and docs。
我做了一个非常基本的笔，总是遇到这个问题：这里我没有风格，但正在工作pen（根据您提供的代码）。$element.popover not defined。在包含bootstrap.js之后，游览很好地初始化（没有样式，但正在工作）。
所以它正在我的pen上工作。但是一旦你点击＆＃34;结束旅行＆＃34;并重新加载页面，游览不会重新启动。所以它设置了一个cookie，因此没有重新开始巡演。删除cookie，游览将再次启动。
所以我认为这可能一直都是你的问题。游览应该工作正常，但是一旦你结束游览，它就不会重新开始。
这是你无法解决的问题，因为一切看起来都是正确的，甚至是代码本身！