使用帶有goTo（）的條件if / else檢查跳過bootstrap tour中的步驟

Question

第一次在這里問一個問題，所以我希望我能掌握所有信息，但如果我遺漏了什么，請隨時要求澄清。

我正在嘗試使用bootstrap tour庫創建一個瀏覽頁面。 我可以開始它，並且在大多數情況下它運行相當順利，除非我試圖讓它檢查變量並根據需要跳過某些步驟。

我不能在我的真實項目中復制我的整個代碼庫，所以我試着用我能想到的相關部分制作一個jsfiddle 。 我承認我之前從未使用過jsfiddle並且它不起作用我認為因為我可能沒有正確加載游覽文件。 我已鏈接到獨立文件，因此它們包含運行所需的相關引導程序位。 我承認我是一個完全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();

我已經閱讀了這里的問題，就像這個問題很接近，但是我遇到的問題是，因為在onNext函數中有一個if / else檢查，當我在控制台中運行調試器時chrome它將檢查變量是否為真，將向前跳過並顯示正確的工具提示，但即使無法看到，也會觸發常規的“下一個”功能。 我只在控制台中顯示的調試器工具中看到它。 如果在正確的進一步尖端上單擊“下一步”，而不是沿着陣列繼續通過剩余的尖端，則表現為在原始工具提示上擊中了“下一個”。 （這很難形容對不起）。

因此，如果游覽（0） - >游覽（1） - >（檢查foo = true） - >游覽（5） - >（而不是去游覽（6）它將返回並開始游覽（3））因為它認為游覽（5）實際上是游覽（2）

也許我只是從根本上不了解tour.goTo（）函數應該如何工作，但我只是沒有想法。 我試過的是在if語句中停止游覽

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

這會在控制台中拋出錯誤，說明由於巡視結束而無法顯示showStep。 奇怪的是，在我的頁面的另一部分，我不得不停止游覽並使用超時重啟（我不得不等待一個元素加載），並且end-start-goTo工作正常。 該代碼看起來像這樣（但不是在jsfiddle中）：

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

似乎是if / else語句似乎導致了這個問題，不是在兩個選項之間進行選擇，而是通過觸發兩者。

提前感謝您提供給我的任何幫助。 對小說感到抱歉，但我想確保盡可能多地提供信息。

Answer 1

遍歷代碼后，您似乎無法在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單擊處理程序后缺少#start括號。 您應該能夠查看瀏覽器調試器控制台以查看這些錯誤。

使用帶有goTo（）的條件if / else檢查跳過bootstrap tour中的步驟

問題描述

1 個解決方案

解決方案1
2 已采納 2015-09-07 17:19:33

使用帶有goTo（）的條件if / else檢查跳過bootstrap tour中的步驟

問題描述

1 個解決方案

解決方案1 2 已采納 2015-09-07 17:19:33

解決方案1
2 已采納 2015-09-07 17:19:33