Javascript 使用goTo()的条件if/else检查跳过引导程序中的步骤
第一次在这里问问题,所以我希望我有所有的信息,但如果我遗漏了什么,请随时要求澄清 我正在尝试使用库创建一个页面浏览。我可以让它启动,在大多数情况下,它运行得相当平稳,除非我试图让它检查变量并根据需要跳过某些步骤 我不能在我的真实项目中复制我的整个代码库,所以我试图用我能弄明白的相关部分来做一个比较。我承认我以前从未使用过JSFIDLE,我认为它不起作用,因为我可能没有正确加载教程文件。我已链接到独立文件,以便它们包含运行所需的相关引导位。我承认我完全是一个JSFIDLE新手,所以我不确定为什么文件似乎没有正确加载和启动,但这是一个完全不同的错误。无论如何,我的基本代码如下: Html: 这会在控制台中抛出错误,指出由于巡更已结束,无法显示showStep。奇怪的是,在我页面的另一部分中,我不得不停止巡更并使用超时重新启动(我必须等待加载元素),而end start goTo运行得很好。该代码如下所示(但不在JSFIDLE中): 似乎是if/else语句引起了问题,它没有在这两个选项之间进行选择,而是同时触发了这两个选项Javascript 使用goTo()的条件if/else检查跳过引导程序中的步骤,javascript,jquery,bootstrap-tour,Javascript,Jquery,Bootstrap Tour,第一次在这里问问题,所以我希望我有所有的信息,但如果我遗漏了什么,请随时要求澄清 我正在尝试使用库创建一个页面浏览。我可以让它启动,在大多数情况下,它运行得相当平稳,除非我试图让它检查变量并根据需要跳过某些步骤 我不能在我的真实项目中复制我的整个代码库,所以我试图用我能弄明白的相关部分来做一个比较。我承认我以前从未使用过JSFIDLE,我认为它不起作用,因为我可能没有正确加载教程文件。我已链接到独立文件,以便它们包含运行所需的相关引导位。我承认我完全是一个JSFIDLE新手,所以我不确定为什么文
提前谢谢你能给我的任何帮助。对于这本小说,我很抱歉,但我想确保我提供了尽可能多的信息。在浏览代码之后,您似乎无法在
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>",
您还需要删除onNext
处理程序
摆弄
注意:您在小提琴上出现的错误,其中裸
right
placement值。它们需要被引用,并且在#start
单击处理程序后缺少一个右括号。您应该能够查看浏览器调试器控制台以查看这些错误。谢谢,这非常有用!在我开始实现之后,我意识到元素是一个需要单击的按钮,因此我必须添加一个onStart变量,以便事件处理程序仅在巡更进行时触发。我在这里更新了我自己的提琴,以向未来有同样问题的人展示:像一个魔咒一样工作。非常感谢。
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();
if (foo == true){
tour.end();
tour.start(true);
tour.goTo(5);
} else {
tour.next();
}
onNext: function(tour){
tour.end();
setTimeout(function(){
tour.start(true);
tour.goTo(4);
}, 500);
}
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>",
$(document).on('click', '#skipBtn', function(e) {
e.preventDefault();
if (foo) {
tour.goTo(5);
}
else {
tour.next();
}
});