跳過步驟（）

第一次問一個問題在這裏，所以我希望我所有的信息，但隨時要求澄清，如果我失去了一些東西。跳過步驟（）

我試圖創建一個使用bootstrap tour庫通過頁遊。我可以開始，大部分時候它運行得相當順利，除非當我試着去檢查一個變量並根據需要跳過某些步驟。

我不能複製我的整個代碼庫在我真正的項目，所以我試圖讓與我能想出的相關部分一jsfiddle。我承認我以前從未使用過jsfiddle，但它不起作用，我認爲我可能沒有得到正確加載的導覽文件。我已鏈接到獨立文件，以便它們包含運行所需的相關bootstrap位。我承認我是一個完全的jsfiddle newb，所以我不知道爲什麼這些文件似乎沒有被正確加載和觸發，但這是一個完全不同的錯誤。總之，這裏是我的基本代碼：

HTML：

<body> 
<button id="start" class="btn btn-default">Start the tour</button> 
<div id="box1" class="box">Element 1</div> 
<div id="box2" class="box">Element 2</div> 
<div id="box3" class="box">Element 3</div> 
<div id="box4" class="box">Element 4</div> 
<div id="box5" class="box">Element 5</div> 
</body>

JS：

var foo = true; 

var tour = new Tour({ 
    storage: false, 
    debug: true, 
    steps: [ 
     { 
      orphan: true, 
      animation: true, 
      backdrop: true, 
      title: "index 0/Step 1", 
      content: "schtuff" 
     }, { 
      animation: true, 
      element: "#box1", 
      placement: right, 
      title: "index 1/Step 2", 
      content: "click this box to continue, should skip to Index 5/Step 6", 
      template: "<div class='popover tour'>"+ 
          "<div class='arrow'></div>"+ 
          "<h3 class='popover-title'></h3>"+ 
          "<div class='popover-content'></div>"+ 
          "<div class='popover-navigation'>"+ 
          "</div>"+ 
         "</div>", 
      onNext: function(tour){ 
       if (foo == true){ 
        alert("skip to 5"); 
        tour.goTo(5); 
       } else { 
        tour.next(); 
       }; 
      } 
     }, { 
      orphan: true, 
      animation: true, 
      backdrop: true, 
      title: "index 2/Step 3", 
      content: "moar schtuff" 
     }, { 
      element: "#box2", 
      placement: right, 
      title: "Index 3/Step 4", 
      content: "schtuff" 
     }, { 
      element: "#box3", 
      placement: right, 
      title: "Index 4/Step 5", 
      content: "schtuff" 
     }, { 
      element: "#box4", 
      placement: right, 
      title: "Index 5/Step 6", 
      content: "schtuff" 
     } 
    ] 
}); 

$("#start").on("click", function(){ 
    tour.start(true); 
}; 

//initialize the tour 
tour.init();

我已經通過在這裏像this one問題讀取和它的親密，但我的問題未來的跨越是因爲有一個，如果在onNext功能/其他檢查，當我跑步時在控制檯調試器在Chrome會檢查該變量爲真，將跳過進取，顯示正確的提示，但會即使它不能，也會發出常規的「下一個」功能可見。我只能在調試器工具中看到它在控制檯中顯示。當在正確的進一步提示上單擊「下一步」時，而不是沿着通過剩餘提示的陣列繼續進行，這就好像「下一步」在原始工具提示上被擊中一樣。（這是令人困惑的描述對不起）。

因此，如果旅遊（0） - >遊（1） - >（檢查是否富= TRUE） - >遊（5） - >（而不是去遊覽（6）它會回來（3）因爲它認爲旅遊（5）實際上是旅遊（2）

也許我只是從根本上不理解如何tour.goTo（）函數應該工作，但我只是運行出出主意。我曾嘗試是停止錄製if語句這樣

if (foo == true){ 
    tour.end(); 
    tour.start(true); 
    tour.goTo(5); 
} else { 
    tour.next(); 
}

這全中，控制檯說，showStep無法顯示，因爲巡演已經結束的錯誤。奇怪的是，在另一部分我的頁面，我不得不停止巡視和使用一個超時重啓（我不得不等待一個元素加載），並結束開始goTo工作得很好。該代碼看起來是這樣的（但不在的jsfiddle）：

onNext: function(tour){ 
    tour.end(); 
    setTimeout(function(){ 
     tour.start(true); 
     tour.goTo(4); 
    }, 500); 
}

看來，這似乎會引起問題，通過這兩個選項之間沒有選擇if/else語句，而是通過發射都。

預先感謝您的幫助，您可以給我。對於這本小說感到遺憾，但我想確保我儘可能地提供了儘可能多的信息。

來源

2015-09-04 Duckful

遍歷代碼後，它不會出現，你可能會觸發該onNext處理不同的一步。這是因爲在步驟顯示時，「下一個」按鈕被設置爲顯示下一步的順序（也在顯示步驟時確定）。我也沒有看到任何方式，以防止以前設置的處理程序發射。發生這種情況是因爲它們捕獲了輔助函數中的當前步驟，該步驟顯示了當前步驟顯示的下一步。 goTo方法似乎也不會搶佔這個幫助回調。

但是，我可以使用不同的策略使其工作，即不要在可選路徑的步驟中使用傳統的「下一步」按鈕，而是在沒有角色的情況下顯示它用於附加處理程序）並直接爲執行可選導航的按鈕添加處理程序。

替換爲您的模板：

template: "<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-default' data-role='prev'>« Prev</button>" + 
    "<span data-role='separator'>|</span>" + 
    "<button id='skipBtn' class='btn btn-default'>Next »</button>" + 
    "<button class='btn btn-default' data-role='end'>End tour</button>" + 
    "</div>" + 
    "</div>",

，並添加一個委託處理程序的文檔模板的skipBtn。

$(document).on('click', '#skipBtn', function(e) { 
    e.preventDefault(); 
    if (foo) { 
     tour.goTo(5); 
    } 
    else { 
     tour.next(); 
    } 
});

您還需要刪除onNext處理程序。

在https://jsfiddle.net/vgayf3sL/

注意工作小提琴：你有沒有跟你撥弄其中裸right位置值的誤差。他們需要被引用，並且您在#start點擊處理程序後錯過了右括號。您應該能夠查看瀏覽器調試器控制檯以查看這些錯誤。

來源

2015-09-07 17:19:33 tvanfosson

謝謝，這是超級有用！我意識到，在我開始實現該元素是一個需要點擊的按鈕，因此我必須添加一個onStart變量，以便事件處理程序僅在巡視正在進行時觸發。我在這裏更新了自己的小提琴，以表示任何未來有同樣問題的人：https://jsfiddle.net/cz96aps9/4/ – Duckful

工作就像一個魅力。謝謝。 –

跳過步驟（）

回答

相關問題