如何在Bootstrap Tour中跳過10個步驟？

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

---

不太簡單的解決方案 （針對所有場景）：

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