Question

我有一个情况，当我有一个包含十一个步骤的旅程。

在每个步骤中，弹出窗口包含“上一个”，“下一个”，“结束巡视”按钮。我没有使用“结束旅行”来“跳过”，而是试图跳过所有步骤并转到第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）方法也不起作用。

Answer 1

在阅读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);        
    }
});

跳过

不太简单的解决方案（适用于所有情况）： 2.）有一个方法：a。）找到所有步骤b。）抓住点击按钮（跳过）和它的步骤编号（让我们说x））c。）goTo step x + 1 < / p>

高级解决方案：

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

跳过Bootstrap之旅的步骤？

2 个答案: