如何激活第二次兜风之旅

Posted 2023-05-09

【中文标题】如何激活第二次兜风之旅

【英文标题】：How can i activate a second joyride tour

【发布时间】：2014-08-08 13:32:30

【问题描述】：

我的兜风旅行有问题，当我完成一次旅行时，我想开始第二次旅行。我尝试做的是在 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");

在我的代码中（见上文）预览是我用来开始兜风之旅的功能，console.log 仅用于测试，没有特定含义

【参考方案1】：

我知道这是一个老问题，但我添加了一个调用joyride 的destroy 方法的检查，以在开始另一个教程之前删除之前的教程内容。

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

目前看来运行良好。

【参考方案2】：

你从哪里开始兜风？ 你能发布你所有的源代码吗？ 如果您没有这样做，请尝试：

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

【参考方案3】：

您为什么不向您的网页 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 中