这是我的理解,你有：

>包含单个旅游的多个页面(每页的旅游都不同)
>一种检测首次登录到帐户的方法(ruby login count)
>根据第一次登录添加脚本值的能力

解决方案概述

以下解决方案使用localStorage来存储每个旅游标识符的关键值对,以及是否已被看到. localStorage在页面刷新和会话之间依然存在,顾名思义,localStorage对于每个域,设备和浏览器都是唯一的(即chrome的localStorage不能访问firefox的本地存储,即使是在同一个域中,也不能在您的笔记本电脑上使用chrome的localStorage访问chrome的localStorage您的手机即使在同一个域).我提出这个,以说明依赖前言3切换JS标志,如果用户以前登录过.

要启动巡视,代码检查localStorage是否对应的键值对未设置为true(表示已被看到).如果确实存在并被设置为true,则巡视不会启动,否则运行.当每个巡视开始时,使用其onStart方法,我们更新/添加巡视的标识符到localStorage并将其值设置为true.

如果您只想执行当前页面的巡视,可以通过手动调用巡视开始方法进行手动执行,否则可以清除与巡视相关的所有localStorage,并将用户发回第一个page /如果你在第一页,再次调用start方法.

JSFiddle(基于HTML所提出的关于旅游的其他问题)

HTML(这可以是具有id =“tourAgain”属性的任何元素,以便以下代码生效.

<button class="btn btn-sm btn-default" id="tourAgain">Take Tour Again</button>

JS

var isFirstLogin = true; // this value is populated by ruby based upon first login
var userID = 12345; // this value is populated by ruby based upon current_user.id,change this value to reset localStorage if isFirstLogin is true
// jquery on ready function
$(function() {
    var $els = {};  // storage for our jQuery elements
    var tour; // variable that will become our tour
    var tourLocalStorage = JSON.parse(localStorage.getItem('myTour')) || {};

    function activate(){
        populateEls();
        setupTour();
        $els.tourAgain.on('click',tourAgain);
        // only check check if we should start the tour if this is the first time we've logged in
        if(isFirstLogin){
            // if we have a stored userID and its different from the one passed to us from ruby
            if(typeof tourLocalStorage.userID !== "undefined" && tourLocalStorage.userID !== userID){
                // reset the localStorage
                localStorage.removeItem('myTour');
                tourLocalStorage = {};
            }else if(typeof tourLocalStorage.userID === "undefined"){ // if we dont have a userID set,set it and save it to localStorage
                tourLocalStorage.userID = userID;
                localStorage.setItem('myTour',JSON.stringify(tourLocalStorage));
            }
            checkShouldStartTour();
        }
    }

    // helper function that creates a cache of our jQuery elements for faster lookup and less DOM traversal
    function populateEls(){
        $els.body = $('body');
        $els.document = $(document);
        $els.tourAgain = $('#tourAgain');
    }

    // creates and initialises a new tour
    function setupTour(){
        tour = new Tour({
            name: 'homepage',// unique identifier for each tour (used as key in localStorage)
            storage: false,onStart: function() {
                tourHasBeenSeen(this.name);
                $els.body.addClass('is-touring');
            },onEnd: function() {
                console.log('ending tour');
                $els.body.removeClass('is-touring');
            },steps: [{
                element: "div.navbar-header img.navbar-brand",content: "Go home to the main page."
            },{
                element: "div.navbar-header input#top-search",positions & bib color (that they wore in our tournament)"
            },{
                element: "span.num-players",title: "Number of Players",content: "This is the number of players that are in our database for this Tournament"
            },{
                element: '#page-wrapper div.contact-Box.profile-24',title: "Player Info",content: "Here we have a quick snapshot of the player stats"
            }]
        });
        // Initialize the tour
        tour.init();
    }

    // function that checks if the current tour has already been taken,and starts it if not
    function checkShouldStartTour(){
        var tourName = tour._options.name;
        if(typeof tourLocalStorage[tourName] !== "undefined" && tourLocalStorage[tourName] === true){
            // if we have detected that the tour has already been taken,short circuit
            console.log('tour detected as having started prevIoUsly');
            return;
        }else{
            console.log('tour starting');
            tour.start();
        }
    }

    // updates localStorage with the current tour's name to have a true value
    function tourHasBeenSeen(key){
        tourLocalStorage[key] = true;
        localStorage.setItem('myTour',JSON.stringify(tourLocalStorage));
    }

    function tourAgain(){
        // if you want to tour multiple pages again,clear our localStorage 
        localStorage.removeItem('myTour');
        // and if this is the first part of the tour,just continue below otherwise,send the user to the first page instead of using the function below
        // if you just want to tour this page again just do the following line
        tour.start();
    }

    activate();
});

PS.我们没有使用onEnd触发tourHasBeenSeen函数的原因是,当前有一个引导浏览的bug,如果最后一步的元素不存在,则游程结束而不触发onEnd回调BUG.