javascript - Bootstrap Tour - 在一页中初始化两个游览

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 'tour' | Redirect to /member/show/2072

Bootstrap Tour 'tour' | Redirect to /base/show/1

Bootstrap Tour 'tour' | Error redirection loop to /base/show/1

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

Answer 1

我发现了我的错误:游览有一个变量“名称”。默认情况下，它被定义为 'tour' ，如果它没有被覆盖，所有的游览都具有相同的名称。如果每个游览都有自己的名称，那么我的代码就可以完美运行。