个人中心
文章发布
退出
作者热门文章
- iOS/Objective-C 元类和类别
- objective-c - -1001 错误，当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
26
4
第一次在这里提问，所以我希望我掌握了所有信息，但如果我遗漏了什么，请随时要求澄清。
我正在尝试使用 bootstrap tour 通过页面创建导览图书馆。我可以启动它，并且在大多数情况下它运行相当顺利，除非我试图让它检查变量并根据需要跳过某些步骤。
我无法在我的真实项目中复制我的整个代码库，所以我尝试制作一个 jsfiddle与我能弄清楚的相关部分。我承认我以前从未使用过 jsfiddle，我认为它不起作用，因为我可能没有正确加载旅游文件。我已经链接到独立文件，以便它们包含运行所需的相关 Bootstrap 。我承认我是个 jsfiddle 新手，所以我不确定为什么文件似乎没有正确加载和触发，但这是一个完全不同的错误。无论如何，这是我的基本代码:
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 检查，当我在 chrome 的控制台中运行调试器时，它会检查变量是否为真，将跳过并显示正确的工具提示，但也会触发常规的“下一步”功能，即使它看不到。我只看到它在控制台中显示的调试器工具中触发。当在正确的进一步提示上单击“下一步”时，它不会继续沿着阵列通过剩余的提示，就像在原始工具提示上点击“下一步”一样。 (这很难形容抱歉)。
所以如果 tour(0) --> tour(1) --> (检查 foo = true) --> tour(5) --> (而不是去 tour(6) 它会返回并开火tour(3) 因为它认为 tour(5) 实际上是 tour(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 方法似乎也没有抢占此辅助回调。
然而，我能够使用不同的策略使其工作，即不要在带有可选路径的步骤上使用传统的“下一步”按钮，而是在没有 Angular 色的情况下显示它(游览使用附加处理程序)并直接为执行可选导航的按钮添加处理程序。
将您的模板替换为:
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 添加一个委托(delegate)处理程序到文档。
$(document).on('click', '#skipBtn', function(e) {
e.preventDefault();
if (foo) {
tour.goTo(5);
}
else {
tour.next();
}
});
您还需要删除 onNext 处理程序。
在 https://jsfiddle.net/vgayf3sL/ 工作
注意:您的 fiddle 在裸正确 放置值时遇到的错误。它们需要被引用并且您在 #start 单击处理程序之后缺少右括号。您应该能够查看浏览器调试器控制台以查看这些错误。
关于javascript - 使用 goTo() 条件 if/else 检查跳过 Bootstrap 中的步骤，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32407308/
26
4
0
作为入门编程类(class)的家庭作业，我必须设计并实现一个生成随机数 (1-100) 的程序，然后为玩家提供 7 次猜测以正确猜出该数字。我想出了这个算法: 但是，我不知道如何将算法的这种概念表示转
这个问题在这里已经有了答案: 关闭 14 年前。 此问题与Goto Still Considered Harmful 重复.如果您想进一步讨论这个问题，请使用原始问题。 为什么 GOTO 是糟糕的编
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题吗？ 更新问题，以便 editing this post 提供事实和引用来回答它. 关闭3年前。 Improve th
我想知道在这种情况下您不应该使用 goto 而不是使用 while(variable) 是否有原因: :start result=askUser("do you want 1,2,or 3?") sw
是的，我知道 Esdger Dijkstra 说你不应该使用 goto ，但他不是上帝。我认为只要不过分使用无条件分支就可以了。过度使用继承和过度使用分支语句一样有可能创建不可读的代码。 无论如何，现
在 Visual Studio 中 Go To Definition 和 Go To Implementation 有什么区别？ 版本:Visual Studio 2015 Update 1 最佳答案
Section 6.8.1 of C11或 C99 ，或 C89 的第 3.6.1 节所有这些似乎都表明 default 和 case x(其中 x 是一些 constant-expression)是
所以我下载了 sublime text 3，据称“Sublime Text 现在扫描项目中的文件，并构建哪些文件包含哪些符号的索引。这支持项目中的 Goto Definition 和 Goto Sym
当goto语句下面放置标签时，编译器如何找到标签的地址进行跳转？ C 编程是自上而下的方法，对吗？如果标号位于 goto 语句之上，则可以理解，当标号到达 goto 语句时，其地址就已知。请大家解释一
谁能找出 VBA 中“On error goto -1”和“on error goto 0”之间的区别吗？我尝试过 google 和 msdn，但没有成功。 最佳答案 On Error GoTo 0
每当我运行 code下面它发生在我身上，我在使用 if 存在行时犯了一个错误，因为无论目录是否存在，它都表现为该行从未存在过...... echo off echo echo (c) Ryan L
我知道去函数声明的方法(使用 ctags + Ctrl + ])。但是，如果我不想转至函数声明，而是转至函数定义，该怎么办。 例如: // foo.c #include "foo.h" ... if
我正在尝试用防御性编程来完成这个小程序，但我很难处理这个避免 Loop-Goto 的问题，因为我知道这是糟糕的编程。我尝试过 while 和 do...while 循环，但在一种情况下我没有问题。当我
我正在尝试创建一个宏，允许用户单击按钮，Excel 工作表将执行 1:移至下一个/上一个工作表或 2:复制现有工作表，然后移至复制的工作表。 目前我陷入了处理错误处理情况的困境，并且不知道如何解决它。
关闭。这个问题是opinion-based 。目前不接受答案。 想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭5 个月前。 Improv
当他们谈论更喜欢汇编而不是更高级的语言时，我正在和某人通电话。他们提到喜欢 goto 语句，我回答说它会导致意大利面条代码。他们回复了“goto $”之类的内容。我说 goto 会散发出代码气味。他们
我有一个简单的数字根计算(即将整数中的所有数字相加，如果总数超过一位数字，则重复该过程，直到最终得到一位数字的答案)。 我的第一个冲动是简单地计算初始字符串中的数字之和，测试结果是否多于一位数字，如果
我对 C# 还很陌生(一周前开始学习)，在批处理和表达式 2 方面有一些经验，并且我一直在开发基于文本的游戏，试图了解更多信息。我一开始使用了 goto 语句，但根据我发现的几乎每个人的说法，goto
#include int main() { int i; goto l; for(i = 0; i < 5; i++) { l:printf("Hi\n");
我必须编写一个 C 程序(不使用递归、else、for、while、do {} while 并且使用 if 的构造不得包含“return”)来从数组中查找最大数字。所以现在这是我的代码: #inclu
我是一名优秀的程序员,十分优秀！