1

我正在使用 Bootstrap Tour 来构建一个相当严格的导览，其中用户只能在当前步骤上花费 3 秒后才能继续下一步。

为了做到这一点，我nextBtn在游览模板中为“下一步”按钮提供了一个 ID，并希望我可以像这样启用/禁用它：

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);
}

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

4

1 回答 1

4

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

如果由于 boostrap 破坏并重新创建它而无法访问弹出框，则正确的事件onShow是：onNextonShown

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

代码：

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/

于 2013-09-24T16:21:00.883 回答