个人中心
gpt4 book ai didi

javascript - 使用 goTo() 条件 if/else 检查跳过 Bootstrap 中的步骤

转载 作者：塔克拉玛干 更新时间：2023-11-02 21:15:28 27 4
gpt4 key购买 nike

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

我正在尝试使用 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/

27 4 0
文章推荐： javascript - 如何根据 promise 的结果返回 bool 值？
文章推荐： android - 应用程序更新后，Android JobScheduler 或 GCM JobScheduler 是否保留作业？
文章推荐： android - fragment 进入过渡的问题
文章推荐： ios - 邀请 Facebook 好友使用应用
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com