如何跳过10步的靴带游？

Question

我有一个情况，当我有一个包含十一步的巡回演出。

在每一步弹出包含"Prev"，“下一步”，“结束旅游”按钮。

我没有使用“结束之旅”来“跳过”，而是试着跳过所有的步骤，进入第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 () {
        }
    }
]

在这里，我使用数据角色作为“跳过".and --如何使用它作为像onShow()、onEnd()等函数。

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

Answer 1

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

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

简单解决方案(对于这个场景有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)。goTo step x+1

高级解决方案

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

Answer 2

您可以使用下面的代码来实现这一点，对于我来说，它是工作的。

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