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事件中，popover不是accessibile，因为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/

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

1 个答案: