javascript - 在Bootstrap Tour中暂时禁用“下一步”按钮

我正在使用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);
}

但是，这不起作用。什么是正确的方法？

最佳答案

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

在onShow和onNext事件中，由于boostrap破坏并重新创建了弹出窗口，所以正确的事件是onShown：


  显示在每个步骤之后立即执行的功能。


码：

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/

关于javascript - 在Bootstrap Tour中暂时禁用“下一步”按钮，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18985652/