Question

我在这里发帖是因为我无法在Boostrap Tour的官方文档或此处的任何其他主题中找到我的问题的解决方案。

这是我的问题： 我有一个页面，我想在其中初始化两个游览，以便让我的用户选择从哪一个开始。它们由“onClick”调用调用的函数“StartTour”启动。

如果我在同一页面中声明并初始化我的两个游览，当我运行第一个游戏时，在第三步，它会切换到第二个游览的第二步。第二次巡演在我运行时非常有效。

我的实际代码看起来像这样（我只会包含相关部分）：

var tour1
var tour2
[...]
// Bootstrap tour

        //Create tour1
            tour1 = new Tour({
            storage: window.localStorage,
            debug: true,
            //add steps
            steps: [
                {
                path:"/base/show/1",
                element: "#home",
                title: "{{ 'tuto11 title' | trans }}",
                content: "{{ 'tuto11 desc' | trans }}",
                placement: "right"
            },
            {
                path:"/base/show/1",
                element: ".mce-item-table",
                placement: "top",
                title: "{{ 'tuto12 title' | trans }}",
                content: "{{ 'tuto12 desc' | trans }}"
            },
            {
                path:"/base/show/2124",
                element: ".titlepage",
                title: "{{ 'tuto13 title' | trans }}",
                content: "{{ 'tuto13 desc' | trans }}",
                placement: "top"
            },
            {
                path: "/base/show/2566",
                element: ".titlepage",
                title: "{{ 'tuto14 title' | trans }}",
                content: "{{ 'tuto14 desc' | trans }}",
                placement: "top"
            },
            {
                path: "/base/show/1093",
                element: ".titlepage",
                title: "{{ 'tuto15 title' | trans }}",
                content: "{{ 'tuto15 desc' | trans }}",
                placement: "top"
            },
            {
                path: "/base/show/1093",
                element: "h2", //h2 = pas bon
                title:"{{ 'tuto16 title' | trans }}",
                content:"{{ 'tuto16 desc' | trans }}",
                placement:"top"
            }
            ]
        });

        //Initialize the tour
        //tour1.init();

        //Create tour2
        {% if app.user %}
        tour2=new Tour({
            storage: window.sessionStorage,
            debug: true,
            //add steps
            steps: [
                {
                path: "/base/show/1",
                element: "#icProfil",
                title:"{{ 'tuto21 title' | trans }}",
                content:"{{ 'tuto21 desc' | trans }}",
                placement:"bottom"
            },
            {
                path: "/member/show/{{ app.user.getId()}}",
                element: ".titlepage",
                title:"{{ 'tuto22 title' | trans }}",
                content:"{{ 'tuto22 desc' | trans }}",
                placement: "top"
            },
            {
                path: "/member/show/{{ app.user.getId() }}",
                element: ".fa-icon-pencil",
                placement: "bottom",
                title:"{{ 'tuto23 title' | trans }}",
                content:"{{ 'tuto23 desc' | trans }}"

            },
            {
                path: "/member/edit/{{ app.user.getId() }}#civil",
                element: "#idn1",
                placement: "left",
                title: "{{ 'tuto24 title' | trans }}",
                content: "{{ 'tuto24 desc' | trans }}"
            },
            {
                path: "/member/edit/{{ app.user.getId() }}#social",
                element: "#idn2",
                placement: "left",
                title: "test",
                content: "test"
            }
            ]
        });

        tour2.init();
        {% endif %}

    })

    //Start the tours
    function startTour1(){
        tour1.restart();
    }

    function startTour2(){
        tour2.restart();
    }

我测试过的内容： 如果我没有初始化游览2，则在调用StartTour1（）时游览1将完美运行。我也试着像我那样实现我的启动功能：

function startTour2(){
            tour2.init();
            tour2.restart();
    }

在这种情况下，tour1运行良好，但是当tour2启动时，它会在第一步运行，但到达第二步时，我会收到以下错误消息：

Bootstrap Tour'巡演'|重定向到/ member / show / 2072

Bootstrap Tour'巡演'|重定向到/ base / show / 1

Bootstrap Tour'巡演'|错误重定向循环到/ base / show / 1

我没有在互联网上的一个页面或任何规范中找到任何多初始化的例子。关于文档中的内容。如果您有任何线索，请提前致谢。

Answer 1

我发现了我的错误：游览中有一个变量＆＃34; name＆＃34;。默认情况下，它被定义为＆＃39; tour＆＃39;如果它没有被覆盖，所有的游览都有相同的名称。如果每个游览都有自己的名字，我的代码就可以完美运行。

Bootstrap Tour - 在一个页面中初始化两个巡视

1 个答案: