Отключить кнопку «Далее» временно в Bootstrap Tour

Question

Я использую Bootstrap Tour для создания довольно ограничительного тура, в котором пользователь может перейти только к следующему шагу, потратив 3 секунды на текущий шаг.

Для того, чтобы сделать это, я дал кнопку «Next», идентификатор 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 случае поповер не 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/