Блог

У меня проблема с моим туром joyride, когда я завершаю один тур, я хочу начать второй.Что я пытаюсь сделать, так это выполнить второй тур в postRideCallback , но в итоге я повторяю первый тур.Кто-нибудь знает, как это исправить?

 function preview(){
    $('#joyRideTipContent').joyride({
        autoStart : true,
        preStepCallback : function(index, tip) {
            console.log(index);
        },
        postStepCallback : function(index, tip) {
        },
        postRideCallback : function(index, tip) {
            console.log("stop1");
            preview2();
            console.log("stop1.1");
        },
        tipLocation:"left",
        modal : true,
        expose : true
    });
}
function preview2(){
    console.log("stop2.0");
    $('#joyRideTipContent2').joyride({
        preStepCallback : function(index, tip) {
        console.log("stop21.0");
        },
        postStepCallback : function(index, tip) {
        console.log("stop22.0");
        },
        postRideCallback : function(index, tip) {
            console.log("stop23");
            alert("tada")
        },
        tipLocation:"left",
        modal : true,
        expose : true
    });
    console.log("stop2.1");
}
  

в моем коде (см. Выше) предварительный просмотр — это функция, которую я использую для запуска тура joyride и консоли.журналы предназначены только для тестирования и не имеют определенного значения

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

 function tutorial1(){
    if($('.joyride-tip-content')) {
        $.fn.joyride('destroy')
    }
    $('#joyRideTutorial1').joyride({
        modal:true,
        autoStart : true,
        expose: true
    });
 }
 function tutorial2(){
    if($('.joyride-tip-content')) {
        $.fn.joyride('destroy')
    }
    $('#joyRideTutorial2').joyride({
        modal:true,
        autoStart : true,
        expose: true
    });
 }
  

Кажется, пока все работает хорошо.

С чего вы начинаете joyride? Можете ли вы опубликовать весь свой исходный код? Если вы этого не сделали, попробуйте:

   function preview(){
    $('#joyRideTipContent').joyride({
        autoStart : true,
        preStepCallback : function(index, tip) {
            console.log(index);
        },
        postStepCallback : function(index, tip) {
        },
        postRideCallback : function(index, tip) {
            console.log("stop1");
            preview2();
            console.log("stop1.1");
        },
        tipLocation:"left",
        modal : true,
        expose : true
    }).foundation('joyride', 'start');
  }
  

Почему бы вам просто не добавить переменную запроса к URL-адресу вашей страницы? например

 yoursite.com/page?tour=1
yoursite.com/page?tour=2
  

Когда вы закончите тур 1, у вас может появиться ссылка во всплывающем окне вашего последнего тура, которая ссылается на …?tour= 2.

Что вам нужно будет сделать, это проверить переменную запроса на вашем сервере (предполагая, что именно здесь генерируется ваш html) и выполнить простое if / else для вывода соответствующего кода на вашей HTML-странице, например

 if ($tour == 1) {
   // add tour 1 markup and script here
}
elseif ($tour == 2){
  // add your 2 markup and script here
}
  

Это будет означать, что вывод html будет содержать только одну информацию о турах. То, как вы делаете это сейчас, немного запутанно, поскольку туры сталкиваются друг с другом. Использование этого простого метода гарантирует, что в ваш html-код будет загружен только один тур