如何在 Bootstrap Tour 中跳过 10 个步骤？答案

【问题标题】：How to skip 10 steps in Bootstrap Tour?如何在 Bootstrap Tour 中跳过 10 个步骤？
【发布时间】：2014-12-09 02:39:18
【问题描述】：

我有一个情况，当我有一个包含 11 个步骤的游览时。

在每个步骤中，弹出窗口都包含“Prev”、“Next”、“End Tour”按钮。
我没有使用“End Tour”来“跳过”，而是尝试跳过所有步骤并转到第 11 步，但我无法让它工作。

steps: [
    {
        element: "#mobile",
        title: "Mobile Number",
        content: "Click ‘Next’ to view the next search field, Click ‘Previous’ to view the previous search field and click ‘skip’ to select End result.",
        placement: "right",
        backdrop: true,
        orphan: true,
        template: function (step) {
            return "<div class='popover tour'><div class='arrow'></div><h3 class='popover-title'></h3><div class='popover-content'></div><div class='popover-navigation'><button class='btn btn-xs btn-pink' data-role='prev'>« Prev</button><span>&nbsp;</span><button class='btn btn-xs btn-danger' data-role='next'>Next »</button><span>&nbsp;</span><button class='btn btn-xs btn-success' data-role='skip'>Skip</button> </div>   </nav>  </div>"
        },
        onNext: function () {
            dir = 'next';
        },
        onPrev: function () {
        },
        onShown: function () {
        }
    }
]

在这里，我使用数据角色作为“跳过”。我如何将其用作 onShow()、onEnd() 等函数。

我试过goTo(i) 方法也不起作用。

【问题讨论】：

首先很奇怪——他们真的是孤儿吗？如果是的话 - 你会这么好心并尝试在 JSfiddle 或其他东西中模拟它 - 比如jsfiddle.net/marshals/2Q2UW - 这对我们来说可能会更容易:)
先生...这里我在 jsfiddle 中添加了一些更改。jsfiddle.net/2Q2UW/5 这里只是放了一些示例步骤..我需要跳过选项，当我单击跳过按钮时转到游览的最后一步.这个我想要先生..
这个 (jsfiddle.net/x2gex4gg) 可以完成这项工作吗：)
非常感谢您，先生......它的工作......

标签： javascript twitter-bootstrap bootstrap-tour

【解决方案1】：

你可以使用下面的代码来实现这个，对我来说它的工作

 onNext: function(tour){
  var curr=parseInt(tour.getState("current_step"));
  while(true){
    curr+=1;
    var step=tour.getStep(curr);
    //TODO: check if it's undefined
    if($(step.element).length){
      tour.goto(curr);
      return curr;
    }
  }
},
onPrevious: function(tour){
  var curr=parseInt(tour.getState("current_step"));
  while(true){
    curr-=1;
    var step=tour.getStep(curr);
    //TODO: check if it's undefined
    if($(step.element).length){
      tour.goto(curr);
      return curr;
    }
  }
}

【讨论】：

【解决方案2】：

因此，在阅读 DOC 之后 - 没有现成的方法可以跳过步骤。

但我们可以很容易地构建自己的。

简单的解决方案（对于这个场景，只需 3 个步骤）：

1.) 添加按钮角色跳过（我们的，新的，角色）：

<button class='btn btn-xs btn-success' data-role='skip'>Skip</button>

2.) 编写跳过按钮单击的跳过方法：

$("body").on("click","button",function(){
    if($(this).attr("data-role") === 'skip'){
        alert("skip pressed :)");
        tour.goTo(2);        
    }
});

不太简单的解决方案（适用于所有场景）：

1.) 添加带有角色跳过的按钮（我们的，新的，角色）：

<button class='btn btn-xs btn-success' data-role='skip'>Skip</button>

...

<button class='btn btn-xs btn-success' data-role='skip'>Skip</button>

...

<button class='btn btn-xs btn-success' data-role='skip'>Skip</button>

...

etc

2.) 有一种方法可以： a.) 找到所有步骤 b.) 捕捉点击的按钮（跳过）和它的步骤号（比如说 x）） c.) 转到第 x+1 步

高级解决方案：

扩展Jquery插件并添加跨场景代码

【讨论】：