如何在按钮单击时启动 Bootstrap Tour？

Question

我想知道为什么我的 Bootstrap Tour 没有在点击时启动。

请参阅下图以获取参考和代码。请注意，我省略了页面的大部分代码，因为我不想让你不知所措。希望这里有足够的内容让您完成这次巡演。

我做错了什么？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/css/bootstrap-tour.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">



<!-- Button for Tour Start -->
<a id="MSL-initialize-tour" class="MSL-tour-button MSL-white-button" href="#">START TOUR</a>


<img id="MSL-tour-welcome" class="MSL-Headine-Desktop" src="https://sephora.csod.com/clientimg/sephora/welcome/1-22-18_Headline_V2.png" />


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/js/bootstrap-tour.min.js"></script>


<script>

// Instance the tour
var tour = new Tour({
  steps: [ 
  {
    element: "#MSL-tour-welcome",
    placement: "top",
    title: "<span class='glyphicon glyphicon-star'></span> Welcome to MSL!",
    content: "Press 'next' to see page features"
  }
]});


$('#MSL-initialize-tour').click(function(){
  tour.init();
  tour.start();
});

</script>

Answer 1

• 我看到的第一个问题是你的诚信与你的不相符 第 2 行 bootstrap-tour.min.css 的文件。

  integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
  

  该值为bootstrap-theme.min.css。当你运行它时，你可以看到它在你的控制台中的完整性检查有错误。要么删除完整性检查，要么找到正确的完整性值。

• 第二个问题是您使用的是瘦版本的 jQuery。 当您收到 TypeError stop is not a function 时，您会看到此错误 在控制台日志中。您应该改用 jquery-x.x.x.min.js。

• 第三个问题是您正在尝试初始化游览 每次按下按钮，当你只需要初始化它 一次。因此，您应该只调用 tour.start() 一次，并且 然后调用 tour.restart() 之后。

下面的代码会在页面启动时立即开始导览，但只是为了让您了解之后的点击工作。

  tour.init();
  tour.start();
  $('#MSL-initialize-tour').click(function(){
     tour.restart();
  });

tl;dr tour css的完整性值不正确，不应该使用jquery的slim版本，每次点击后都需要重启tour而不是重新初始化。 p>