javascript - 在 Bootstrap Tour 中暂时禁用 'Next' 按钮

Question

我正在使用 Bootstrap Tour 构建一个相当受限的游览，用户只能在当前步骤上花费 3 秒后才能继续下一步。

为了做到这一点，我在导览模板中为“下一步”按钮指定了一个 ID nextBtn，希望我可以像这样启用/禁用它:

var tour = new Tour ({
    name: "my-tour",
    template: "...",
    onNext: function(tour) {
        $("#nextBtn").prop("disabled", true);
    }),
    onShow: function(tour) {
        window.setTimeout(next, 3000);
    });

function next() {
    $("#nextBtn").prop("disabled", false);
}

但是，这是行不通的。正确的方法应该是什么？

Answer 1

有一些拼写错误，但主要问题是您必须使用正确的选择器来访问“下一步”按钮，它不是#nextBtn，而是类的嵌套$(".popover.tour-tour .popover-navigation .btn-group .btn[data-role=next]").

在 onShow 和 onNext 事件中，弹出窗口不可访问，因为 boostrap 销毁并重新创建它，正确的事件是 onShown:

Function to execute right after each step is shown.

代码:

var timer;
var tour = new Tour({
    onShown: function (tour) {
        $(".popover.tour-tour .popover-navigation .btn-group .btn[data-role=next]").prop("disabled", true);
        timer=window.setTimeout(next, 3000);
    }
})

function next() {    
    $(".popover.tour-tour .popover-navigation .btn-group .btn[data-role=next]").prop("disabled", false);
    window.clearTimeout(timer);
}

tour.addStep({
    element: "#one",
    title: "Step 1",
    content: "Content for step 1"
})

tour.addStep({
    element: "#two",
    title: "Step 2",
    content: "Content for step 2"
})

tour.addStep({
    element: "#three",
    title: "Step 3",
    content: "Content for step 3"
})

tour.start()

演示:http://jsfiddle.net/IrvinDominin/3YY7Y/