javascript – 使用带有goTo()的条件if / else检查跳过bootstrap tour中的步骤

2019年7月22日 177次阅读

第一次在这里问一个问题,所以我希望我能掌握所有信息,但如果我遗漏了什么,请随时要求澄清.

我正在尝试使用bootstrap tour库创建一个浏览页面.我可以开始它,并且在大多数情况下它运行相当顺利,除非我试图让它检查变量并根据需要跳过某些步骤.

我不能在我的真实项目中复制我的整个代码库,所以我尝试用我能想到的相关部分制作一个jsfiddle.我承认我之前从未使用过jsfiddle并且它不起作用我认为因为我可能没有正确加载游览文件.我已链接到独立文件,因此它们包含运行所需的相关引导程序位.我承认我是一个完全jsfiddle newb所以我不确定为什么文件似乎没有加载和正确触发,但这是一个完全不同的错误.无论如何,这是我的基本代码：

HTML：

<body>
<button id="start" class="btn btn-default">Start the tour</button>
<div id="box1" class="box">Element 1</div>
<div id="box2" class="box">Element 2</div>
<div id="box3" class="box">Element 3</div>
<div id="box4" class="box">Element 4</div>
<div id="box5" class="box">Element 5</div>
</body>

JS：

var foo = true;

var tour = new Tour({
    storage: false,
    debug: true,
    steps: [
        {
            orphan: true,
            animation: true,
            backdrop: true,
            title: "index 0 / Step 1",
            content: "schtuff"
        }, {
            animation: true,
            element: "#box1",
            placement: right,
            title: "index 1 / Step 2",
            content: "click this box to continue, should skip to Index 5 / Step 6",
            template: "<div class='popover tour'>"+
                            "<div class='arrow'></div>"+
                            "<h3 class='popover-title'></h3>"+
                            "<div class='popover-content'></div>"+
                            "<div class='popover-navigation'>"+
                            "</div>"+
                        "</div>",
            onNext: function(tour){
                if (foo == true){
                    alert("skip to 5");
                    tour.goTo(5);
                } else {
                    tour.next();
                };
            }
        }, {
            orphan: true,
            animation: true,
            backdrop: true,
            title: "index 2 / Step 3",
            content: "moar schtuff"
        }, {
            element: "#box2",
            placement: right,
            title: "Index 3 / Step 4",
            content: "schtuff"
        }, {
            element: "#box3",
            placement: right,
            title: "Index 4 / Step 5",
            content: "schtuff"
        }, {
            element: "#box4",
            placement: right,
            title: "Index 5 / Step 6",
            content: "schtuff"
        }
    ]
});

$("#start").on("click", function(){
    tour.start(true);
};

//initialize the tour
tour.init();

我已经阅读了像this one这样的问题并且它已经关闭,但是我遇到的问题是,因为在onNext函数中有一个if / else检查,当我在控制台中运行调试器时它将检查变量是否为真,将向前跳过并显示正确的工具提示,但即使无法看到,也会触发常规的“下一个”功能.我只在控制台中显示的调试器工具中看到它.如果在正确的进一步尖端上单击“下一步”,而不是沿着阵列继续通过剩余的尖端,则表现为在原始工具提示上击中了“下一个”. (这很难形容对不起).

所以如果游览(0) – >游览(1) – > (检查foo = true) – > tour(5) – > (而不是去游览(6)它会回来并且开始游览(3)因为它认为游览(5)实际上是游览(2)

也许我只是从根本上不了解tour.goTo()函数应该如何工作,但我只是没有想法.我试过的是在if语句中停止游览

if (foo == true){
    tour.end();
    tour.start(true);
    tour.goTo(5);
} else {
    tour.next();
}

这会在控制台中抛出错误,说明由于巡视结束而无法显示showStep.奇怪的是,在我的页面的另一部分,我不得不停止游览并使用超时重启(我不得不等待一个元素加载),并且end-start-goTo工作正常.该代码看起来像这样(但不是在jsfiddle中)：

onNext: function(tour){
    tour.end();
    setTimeout(function(){
        tour.start(true);
        tour.goTo(4);
    }, 500);
}

似乎是if / else语句似乎导致了这个问题,不是在两个选项之间进行选择,而是通过触发两者.

提前感谢您提供给我的任何帮助.对小说感到抱歉,但我想确保尽可能多地提供信息.

最佳答案 遍历代码后,您似乎无法在onNext处理程序中触发不同的步骤.这是因为在显示步骤时设置了“下一个”按钮,其中一个动作按顺序显示下一步(也在步骤显示时确定).我也没有看到任何方法来防止先前设置的处理程序被触发.发生这种情况是因为它们捕获了辅助函数中的当前步骤,该步骤显示了当前步骤显示时的下一步. goTo方法似乎也没有抢占这个帮助器回调.

然而,我能够使用不同的策略使其工作,即,不使用带有可选路径的步骤上的传统“下一步”按钮,而是显示它没有角色(游览用于附加处理程序)并直接为执行可选导航的按钮添加处理程序.

将模板替换为：

template: "<div class='popover tour'>" +
    "<div class='arrow'></div>" +
    "<h3 class='popover-title'></h3>" +
    "<div class='popover-content'></div>" +
    "<div class='popover-navigation'>" +
    "<button class='btn btn-default' data-role='prev'>« Prev</button>" +
    "<span data-role='separator'>|</span>" +
    "<button id='skipBtn' class='btn btn-default'>Next »</button>" +
    "<button class='btn btn-default' data-role='end'>End tour</button>" +
    "</div>" +
    "</div>",

并为文档中的skipBtn添加委托处理程序.

$(document).on('click', '#skipBtn', function(e) {
    e.preventDefault();
    if (foo) {
        tour.goTo(5);
    }
    else {
        tour.next();
    }
});

您还需要删除onNext处理程序.

工作小提琴在https://jsfiddle.net/vgayf3sL/

注意：您的小提琴所出现的错误,其中没有正确的放置值.需要引用它们,并且在#start单击处理程序后缺少右括号.您应该能够查看浏览器调试器控制台以查看这些错误.

点赞